CSS/Bootstrap div to Fill it's parent height

Question

I'm pretty much stuck with making side menu div's of my code filling the parent height to 100%. I've tried alot of googling and testing before comming to ask..

Code snippet: http://jsfiddle.net/zntxaspd/

html, body { height: 100%;}
.row.content { height: 100%; width:70%; margin: auto; }
.sidenav { padding-top: 20px;background-color: #f1f1f1; height: 100%;}

@media screen and (max-width: 767px) {
.sidenav {
    height: auto;
    padding: 15px;
}
.row.content {height:auto;}
}
h5  { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }
.rightcontainer {   width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}
.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}
.leftcontainer {width:100%; margin: auto;  margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }

I can not understand why both side menu's are filling just the height of their own content instead of filling height of the parent div. Is there something I'm doing wrong? It fills fine if I dont add !DOCTYPE html to my project, but from what I understand its bad solution so I should find other way around..

Best regards

Answer 1

http://jsfiddle.net/zntxaspd/6/

Add display: flex;to .row.content:

.row.content { height: 100%; width:70%; margin: auto;  display: flex; }

Add flex: 1; to .sidebar:

.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}

Adjust your media query to keep it responsive:

@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height:auto; display: block;}
}