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