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

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

From: John Kreitlow <john.kreitlow@gmail.com>
Date: Fri, 20 Jun 2014 13:53:39 -0400
Message-ID: <CAHFriLbBioF1o9Ya4pNoNreFusQOxgCiKq45od9=d1501_bpgg@mail.gmail.com>
To: Jon Rimmer <jon.rimmer@gmail.com>
Cc: www-style list <www-style@w3.org>
Hi John,

This has been discussed a few times now:

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
Received on Friday, 20 June 2014 17:57:37 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:43 UTC