Re: [css-flexbox] Behavior of nested containers

On 09/15/2015 04:52 PM, Daryl Haresign wrote:
> 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.

You're exactly right, at least in the case of Firefox. And this is a bug
(in that we're not matching the current spec). At least in Firefox's
case, we're just mis-calculating the intrinsic width of the "fc" flex
container. (We asking each child for its contribution to the parent's
max-content width, and we add up those contributions. If 'width' isn't
set, then we use the child's auto-width. So your inner 'fc' element ends
up with an auto-width that's only as wide as "ab", which doesn't end up
being wide enough to avoid wrapping after 'flex-basis' is taken into
consideration during flex layout.)

The spec text on flex container intrinsic sizing (and how flex items
contribute to that) has gone through several revisions, the most recent
revision being very recent.  Mozilla has
https://bugzilla.mozilla.org/show_bug.cgi?id=1055887 filed on updating
to the final spec text [which has evolved during the life of that bug].
When that bug is fixed, I expect you'll get the results you expect (no
wrapping), in Firefox at least.

~Daniel

Received on Wednesday, 16 September 2015 17:17:05 UTC