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

[please don't top-post http://wiki.csswg.org/tools/www-style]

On Fri, Jun 20, 2014 at 10:53 AM, John Kreitlow <john.kreitlow@gmail.com> wrote:
> 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!
>
> 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.

That email is about percentage padding, which isn't relevant to Jon's
question or test-cases.

~TJ

Received on Friday, 20 June 2014 18:05:10 UTC