[csswg-drafts] [css-flexbox] Does the automatic min size ignore content flex-basis in the inline axis but not in the block axis? (#7270)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox] Does the automatic min size ignore content flex-basis in the inline axis but not in the block axis? ==
Consider this case:

```html
<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>
```
![](https://user-images.githubusercontent.com/7477678/167952711-689fc8ba-0d9c-4ea9-bdf1-507656594d24.png)

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:

```html
<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>
```
![](https://user-images.githubusercontent.com/7477678/167953244-16ef484d-52c3-4605-adc2-d04d0436197f.png)

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.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7270 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 11 May 2022 21:57:40 UTC