W3C home > Mailing lists > Public > www-style@w3.org > January 2015

Inconsistency in flex-basis?

From: Shashi Gowda <shashigowda91@gmail.com>
Date: Fri, 23 Jan 2015 11:33:26 +0530
Message-ID: <CAKs8bqk0S2XHRN-01jD0Q9ttNBy_o7s-yREwSTdrbwx6XPCmUA@mail.gmail.com>
To: www-style@w3.org
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:50 UTC