Re: [css-flexbox] Behavior of nested containers

On 15 September 2015 at 22:34, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> 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
>

It seems to behave exactly the same in Chrome, Chrome Canary, Firefox,
and Safari. Looking through the mailing list I wondered if
https://lists.w3.org/Archives/Public/www-style/2014Aug/0308.html was
relevant, and the extra paragraph that was then added to the draft spec
https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes but I don't
really follow all the terms used, so it's hard to say for sure.