[css-flexbox] Behavior of nested containers

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,
Daryl.