[css-flexbox] Behaviour of percentage heights in column direction

While experimenting with flexbox, I ran into an interesting
inconsistency between how browsers handle percentage height/flex-basis
values in column direction flexbox containers, which Tab suggested I
post about here.

First, take a look at the this testcase:
http://brillskills.com/standards/flex-percentage-test.html

In Firefox[1] you should see five identical layouts, in Chrome[2] the
last three do not show the yellow boxes. The first two layouts use old
layout methods: px and percentage heights, and absolute positioning.
The last three use nested flexboxes. Safari seems to match Chrome,
while IE mostly matches Firefox.

The issue seems to be how the browser resolves a percentage
height/flex-basis when there is no explicit height on the element's
parent flex container, but there *is* an explicit height on the
parent's parent (or somewhere further up the hierarchy). E.g. is a
"flex" or "flex-basis" as good as an explicit height or
absolute-positioning dimensions when it comes to sizing child
elements? When resoling the height of a flex item, Firefox appears to
use the height of its flex container as controlled by its own flexing
properties and flex container, whereas Chrome treats its container
like it has no explicit height, so the percentages of its children
resolve to "auto', and thus to 0 in the test.

Tab thought that Chrome was doing the right thing here, but I have to
say I much prefer the Firefox/IE behaviour. It seems very useful to be
able to specify an explicit height on the root element of a widget,
then use nested flexboxes within it and have everything flow down the
layout hierarchy appropriately. Particularly, if you can't do this
with an element whose height is controlled only by its "flex"
property, then there are certain layouts that will be impossible
(although grid might cover them).

Hope all that made sense. I'm not totally up to speed on my
flex/layout jargon, so apologies if I've misused any terms!

Thanks,
Jon

[1] Aurora v32.0a2
[2] 37.0.2054.3 dev

Received on Friday, 20 June 2014 17:03:59 UTC