Flexbox fill remaining height of 100%

Why doesn’t “Box 2” fill the full (available) space? The height:100% is ignored…

HTML:

<div id="container">
Box 1
Box 2
Box 3
</div>

CSS:

body{margin:0 auto;}


#container{width:100%;height:100%;background:#ccc;display:-webkit-flex;display:flex;flex-direction:column}


#box1 {background:red;height:50px}
#box2 {background:yellow;-webkit-flex:1;flex:1}
#box3 {background:green;height:50px}

http://jsfiddle.net/618axkjy/2/

Thanks!


solution

It’s because the parent #container element doesn’t have a height of 100%. At the moment, the height of the body element is determined by the height of the #container element (since it’s the only child). Since you’re defining the height of the #container element using percentages, the height will remain the same since the parent’s height is also the same.

You need to set the height of the html/body elements to 100%:

Updated Example

html, body, #container {   height: 100%;
}

..or you could define the height of the #container element in viewport-percentage units, vh:

Updated Example

#container {   height: 100vh; /* 100% of the viewport height */
}