It's a complicated case.
Your .flexbox-child
is only a flex item, but not a flex container. Therefore, align-items: stretch
, which only applies to flex containers, is ignored.
Then, .flexbox-grand-child
has a percentage height, which behaves like this:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
The containing block is the flex item (.flexbox-child
), which has no explicit height, and its height seems to depend on the content.
However, this dependency is only due to the new min-height: auto
. But before taking min-height
into account, the height of the flex item will be (due to the initial align-self: stretch
) the height of the container, which is specified explicitly, ignoring the content.
Then, Firefox considers that the height of .flexbox-child
does not depend on its contents, so height
percentages in its children should work. And then your code works.
However, Chrome doesn't think so.
I'm not sure which one does it right. It doesn't help that height
is only defined in the old CSS2.1 and in CSS basic box model, which is an inconsistent draft.
To be safe, better set the height of .flexbox-child
explicitly. Or make it a flex container.