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: Tue, 15 Sep 2015 19:52:16 -0400
Message-ID: <CAMKrWe6gmUOCCBvp3rUmrtH3zTFV2oQU8fc1WfSxAaqBbt2ZqA@mail.gmail.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 Tuesday, 15 September 2015 23:53:07 UTC

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