W3C home > Mailing lists > Public > www-style@w3.org > June 2014

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 20 Jun 2014 11:04:23 -0700
Message-ID: <CAAWBYDCbTa5qarQMZsTbHNRoF83xL2LyDXBdn+9eZtREFXUJHw@mail.gmail.com>
To: John Kreitlow <john.kreitlow@gmail.com>
Cc: Jon Rimmer <jon.rimmer@gmail.com>, www-style list <www-style@w3.org>
[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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:22 UTC