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

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.