Re: [css-flexbox] Behavior of nested containers

> On Sep 15, 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

Just for the record, it seems that IE11 and Edge work as you all suggest this should.

Received on Wednesday, 16 September 2015 22:47:18 UTC