Inconsistency in flex-basis?

I have this markup:

<div style="display: inline-flex; flex-direction: row;">
    <div style="width: 100px; flex: 1 1 0; height: 100px; background-color:
gray;"></div>
    <div style="width: 150px; flex: 1 1 0; height: 150px; background-color:
black;"></div>
</div>

The two inner boxes appear one after the other, their width are distributed
and they sum up to the sum of their original width. They overflow if the
container's width is not sufficient. (Also notice that the flex-basis of
the boxes is 0.)

But now if I set the flex-direction to column, the two boxes disappear. I
then need to set the height of the containing div to be able to see them.

I think these two outcomes are inconsistent. A more obvious behavior would
be that the flex container collapses to 0 width (if width is not set) in the
flex-direction: row case. Another alternative is that the sum of the
natural heights of the inner boxes can be distributed in the flex-direction:
column case, similar to how the natural width gets distributed in the row
case.

Do correct me if I am missing something...

Regards

Received on Friday, 23 January 2015 09:08:18 UTC