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

Hi John,

This has been discussed a few times now:
http://lists.w3.org/Archives/Public/www-style/2014Apr/0184.html

The decision has been made to keep flexbox and grid layout behavior the
same. Unfortunately for us, that means we need a different solution to
maintain the aspect ratio of a block inside of a flex container.
On Jun 20, 2014 1:06 PM, "Jon Rimmer" <jon.rimmer@gmail.com> wrote:

> 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
>
>