Skip to content

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

Closed
@Loirooriol

Description

@Loirooriol

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Closed as Question AnsweredUsed when the issue is more of a question than a problem, and it's been answered.css-flexbox-1Current Work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions