Closed
Description
Consider this case:
<div style="display: inline-flex; flex-direction: column; border: solid orange">
<div style="flex-basis: 0px; display: flex; flex-direction: column; border: solid cyan;">
<div style="flex: 0 0 100px; border: solid fuchsia">foo</div>
<div style="flex: 0 0 100px; border: solid fuchsia">bar</div>
</div>
</div>
The cyan element has flex-basis: 0
, but Blink, WebKit and Gecko agree its inner height is 212px due to min-height: auto
.
However, let's make the inline axis be the main axis:
<div style="display: inline-flex; flex-direction: row; border: solid orange">
<div style="flex-basis: 0px; display: flex; flex-direction: row; border: solid cyan;">
<div style="flex: 0 0 100px; border: solid fuchsia">foo</div>
<div style="flex: 0 0 100px; border: solid fuchsia">bar</div>
</div>
</div>
Now the inner width is the size of the texts "foo" + "bar" plus 12px.
So why does the automatic minimum size take the flex-basis
of the contents into account in the block axis but not in the inline axis?
Is it a bug? I'm not seeing what part of the spec causes the asymmetry.