W3C home > Mailing lists > Public > www-style@w3.org > September 2015

[css-flexbox] Behavior of nested containers

From: Daryl Haresign <d.haresign@googlemail.com>
Date: Mon, 14 Sep 2015 09:28 +0000
Message-ID: <218C07E9-8774-485C-8BE2-28B278F2654F@googlemail.com>
To: www-style@w3.org
I have been trying to understand some behavior with nested flexbox containers.
I think I have an explanation for what is going on, but I wanted to get a bit
more clarity, and also to determine whether this is what should be going on.

I have made a quick example here: http://jsfiddle.net/voc9grx6/

The question is: why is 'b' being wrapped to a new line? There is plenty of
space for it all to be displayed on a single line.

It seems to me that when the outer flexbox container is trying to determine the
width of its two items, it doesn't take into account the 'flex-basis' of 'fia'.
Instead it just looks at the widths of 'fia' and 'fib', which are both 'auto',
and thus it allocates space for those widths. When it then comes to actually
place 'fia' and 'fib' inside the inner container, it then takes into account
the 'flex-basis', and determines that 'a' is too wide, and thus needs to wrap.

It would be good if my theory could be confirmed, perhaps with references to
the Flex Layout Algorithm steps from the spec.

Further, is it correct that the 'flex-basis' of 'a' isn't taken into
consideration when determining the space required for the first item in the
outer container?

Many thanks,
Received on Wednesday, 16 September 2015 14:48:32 UTC

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