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

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

== [css-flexbox] min/max-content sizes of flex item should take definite cross size into account, right? ==
What should the flex base size be here?

```html
<!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 |
| - | - |
| ![](https://github.com/user-attachments/assets/431a65af-c7eb-4fcc-85fb-db6afaad86f5) | ![](https://github.com/user-attachments/assets/52e64cc4-e9e2-4f4f-aba1-7af93899b298) |

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](https://drafts.csswg.org/css-flexbox-1/#definite) used [flex basis](https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis)

Not definite

> B. If the flex item has ...
>    - a [preferred aspect ratio](https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio),

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](https://drafts.csswg.org/css-sizing-3/#available) using its used [flex basis](https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis) in place of its [main size](https://drafts.csswg.org/css-flexbox-1/#main-size), treating a value of [content](https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content) as [max-content](https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content).

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

> If a [cross size](https://drafts.csswg.org/css-flexbox-1/#cross-size) is needed to determine the main size (e.g. when the [flex item](https://drafts.csswg.org/css-flexbox-1/#flex-item)’s main size is in its block axis, or when it has a [preferred aspect ratio](https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio)) and the flex item’s cross size is [auto](https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-auto) and not [definite](https://drafts.csswg.org/css-flexbox-1/#definite), in this calculation use fit-content as the flex item’s cross size. The [flex base size](https://drafts.csswg.org/css-flexbox-1/#flex-base-size) is the item’s resulting main size.

OK, so here we need a cross size. 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](https://drafts.csswg.org/css-flexbox-1/#single-line-flex-container) [flex container](https://drafts.csswg.org/css-flexbox-1/#flex-container) has a definite [cross size](https://drafts.csswg.org/css-flexbox-1/#cross-size), the [automatic](https://drafts.csswg.org/css-sizing-3/#automatic-size) [preferred](https://drafts.csswg.org/css-sizing-3/#preferred-size) [outer](https://drafts.csswg.org/css-sizing-3/#outer-size) cross size of any [stretched](https://drafts.csswg.org/css-flexbox-1/#stretched) [flex items](https://drafts.csswg.org/css-flexbox-1/#flex-item) is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered [definite](https://drafts.csswg.org/css-flexbox-1/#definite).


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


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

Received on Wednesday, 26 February 2025 23:51:57 UTC