Nested flexboxes works differently across browsers

Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is causing some confusion here. Basically, it looks like it is taller than the browser believes it to be, which is why height: 100% doesn't work like you expect (I'm not certain which behavior is correct in this instance).

For whatever reason, promoting the element to a flex container works.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">    <div class="boxHeader">HEADER</div>    <div class="boxContent box">        <div class="boxHeader moregreen">INNER HEADER</div>        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>        <div class="boxFooter moreblue">INNER FOOTER</div>    </div>    <div class="boxFooter">FOOTER</div></div>

This question has been linked for a specific problem: How to make nested elements in a flex box fill the whole height? The short answer is:

Use display:flex on the child and avoid height:100%. Here is a simplified example on codepen.

CourtDemone explained it well (more here):

According to the flexbox spec, an align-self:stretch value (the default for a flex'd element) changes only the used value of an element's cross-size property (in this case, height). Percentages however are calculated from the specified value of the parent's cross-size property, not it's used value.

I've found a solution without removing the extra-div.

You need to make boxContent relative positioned and its containing box absolute.

With attaching an extra css class to the inner div:

<div class="boxContent">    <div class="box fullSize innerBox">

and following css:

.boxContent {  ...    position: relative;}.innerBox{    position: absolute;    top: 0px;    bottom: 0px;}

here's the updated jsfiddle: http://jsfiddle.net/MUrPj/223/

This question is pretty old, but this might be helpful for future visitors