Flexbox fill remaining height of 100%

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


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


body{margin:0 auto;}


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




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 */