Nested flexboxes works differently across browsers

Question

I have a small example of a nested flexbox setup: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

In this example the following applies:

• CSS \'box\' cl

Answer 1

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/

    
HEADER
    

        
INNER HEADER
        
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        
INNER FOOTER
    
    
FOOTER