Re: [css-flexbox] Behavior of nested containers

On Tue, Sep 15, 2015 at 4:52 PM, Daryl Haresign
<d.haresign@googlemail.com> 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.
>
> 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?

I'll have to review the algorithm, but there *shouldn't* be any
difference between setting 'width' and setting 'flex-basis' there.
This appears to be a bug.  The *intention* is that "flex-basis:auto;
width: XXX;" and "flex-basis: XXX" are identical in all cases.

I'm on a Chromebook right now, and so don't have access to any other
browsers, but how does work in Firefox?

~TJ

Received on Wednesday, 16 September 2015 02:35:45 UTC