Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[css-flexbox] min/max-content sizes of flex item should take definite cross size into account, right? #11791

Open
Loirooriol opened this issue Feb 26, 2025 · 3 comments
Open

[css-flexbox] min/max-content sizes of flex item should take definite cross size into account, right? #11791

Loirooriol opened this issue Feb 26, 2025 · 3 comments
Labels
css-flexbox-1 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Feb 26, 2025 •
edited
Loading

What should the flex base size be here?

<!DOCTYPE html>
<div style="display: flex; width: 100px; height: 100px; background: red">
  <div style="min-width: 0; background: green">
    <canvas width="10" height="10" style="height: 100%"></canvas>
  </div>
</div>
Blink WebKit, Gecko

I plan to align Servo with Blink, which is the behavior that makes sense to me.

The spec is not particularly clear, though: https://drafts.csswg.org/css-flexbox-1/#flex-base-size

A. If the item has a definite used flex basis

Not definite

B. If the flex item has ...

No preferred aspect ratio

C. If [...] the flex container is being sized under a min-content or max-content constraint

Not the case.

D. Otherwise, if [...] the available main size is infinite,

Nope

E. Otherwise, size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content.

Sure, browsers still disagree if I use flex-basis: max-content directly.

If a cross size is needed to determine the main size (e.g. when the flex item’s main size is in its block axis, or when it has a preferred aspect ratio) and the flex item’s cross size is auto and not definite, in this calculation use fit-content as the flex item’s cross size. The flex base size is the item’s resulting main size.

OK, so here we need a cross size, to resolve the canvas percentage. The preferred cross size is auto but definite, so I shouldn't use fit-content. So I'm assuming I should use the definite cross size: https://drafts.csswg.org/css-flexbox-1/#definite-sizes

If a single-line flex container has a definite cross size, the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.
@Loirooriol Loirooriol added the css-flexbox-1 Current Work label Feb 26, 2025
@Loirooriol
Copy link
Contributor Author

BTW, using a stretch size makes Gecko behave like Blink. WebKit remains the same

<!DOCTYPE html>
<style>.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch }</style>
<div style="display: flex; width: 100px; height: 100px; background: red">
  <div class="stretch" style="min-width: 0; background: green">
    <canvas width="10" height="10" style="height: 100%"></canvas>
  </div>
</div>
Blink, Gecko WebKit

@Loirooriol
Copy link
Contributor Author

And everybody agrees on a column flexbox:

<!DOCTYPE html>
<div style="display: flex; flex-direction: column; width: 100px; height: 100px; background: red">
  <div style="min-height: 0; background: green">
    <canvas width="10" height="10" style="width: 100%"></canvas>
  </div>
</div>
Blink, Gecko, WebKit

@Loirooriol
Copy link
Contributor Author

Loirooriol commented Feb 27, 2025 •
edited
Loading

Tests in web-platform-tests/wpt#50987

Oh, an existing one in /css/css-sizing/intrinsic-percent-replaced-026.html, for https://bugzilla.mozilla.org/show_bug.cgi?id=1888262

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-flexbox-1 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol