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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Loirooriol opened this issue May 11, 2022 · 3 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-flexbox-1 Current Work

Comments

@Loirooriol
Copy link
Contributor

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.

@Loirooriol Loirooriol added the css-flexbox-1 Current Work label May 11, 2022
@bfgeek
Copy link

bfgeek commented May 12, 2022

This is the "default" intrinsic-size algorithm broken for flexbox at the moment.

This is what this looks like with our new --enable-blink-features=NewFlexboxSizing flag (@davidsgrogan - for some reason we aren't including borders yet FYI):

Screen Shot 2022-05-12 at 4 23 32 PM

@Loirooriol
Copy link
Contributor Author

OK, thanks for the explanation.

@Loirooriol Loirooriol added the Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. label May 13, 2022
@davidsgrogan
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-flexbox-1 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants