Re: [csswg-drafts] [css-sizing][css-flexbox] It's false that `stretch` size behaves as `stretch` alignment (#11784)

In recent chrome canary we changed stretch to behave closer to `align-self: stretch`. Blink now mostly stretches `cross-size:stretch` to the _line_, not the container. But we _arguably_* don't completely follow the current spec, and think it's better behavior not to, as @bfgeek mentions above.

Our deviation from the current spec (and, as a corollary, our spec-change proposal) can be summed up as
 * If flex-line cross size is known, `cross-size:stretch` stretches to it
 * Otherwise (e.g. when computing the flex-line cross-size), `cross-size:stretch` stretches to the container width

Whereas the current spec _arguably_* requires
 * If flex-line cross size is known, `cross-size:stretch` stretches to it
* Otherwise, `cross-size:stretch` behaves as `fit-content` with container cross size as available size

Revisiting Oriol's example in https://github.com/w3c/csswg-drafts/issues/11784#issuecomment-2686043880: ([live](https://jsfiddle.net/dgrogan/m7j5no2h/)):

```html
<!DOCTYPE html>
<style>
.container { display: flex; flex-direction: column; width: 100px; height: 100px; border: solid; flex-wrap: wrap; align-content: start }
.stretch { width: -moz-available; width: -webkit-fill-available; width: stretch }
</style>
<div class="container">
  <div class="stretch" style="height: 75px; border: solid cyan">a</div>
  <div class="stretch" style="height: 75px; border: solid magenta">b</div>
</div>
<div class="container">
  <div class="stretch" style="height: 75px; border: solid cyan">a</div>
  <div style="border: solid orange; width: 150px"></div>
  <div class="stretch" style="height: 75px; border: solid magenta">b</div>
</div>
<div class="container">
  <div style="height: 75px; border: solid cyan;">a</div>
  <div style="height: 75px; border: solid magenta">b</div>
</div>
<div class="container">
  <div style="height: 75px; border: solid cyan;">a</div>
  <div style="border: solid orange; width: 150px"></div>
  <div style="height: 75px; border: solid magenta">b</div>
</div>
```
Blink's old behavior:
<img width="265" alt="Image" src="https://github.com/user-attachments/assets/d90f36b8-4a2e-4872-8f57-cc45bc655373" />
Blink's new behavior:
<img width="265" alt="Image" src="https://github.com/user-attachments/assets/0def3157-020b-4857-8f60-2ad7713c4078" />
What the spec _arguably_* calls for:
<img width="264" alt="Image" src="https://github.com/user-attachments/assets/03a6a9c2-5795-413b-ac4c-4621a2c7d59b" />

In some of these flex items, the author asked to stretch, and the current spec _arguably_* says to match `align-self:stretch`, but that results in no stretching at all. We argue that not stretching when the author requested it is lame; we should give them some version of what they want when we can.

@dholbert @Loirooriol WDYT? Do you prefer Blink's "new" behavior, or the "spec" behavior?

PS: On mentions of **_arguably_***: I say arguably, because there's actually an interpretation of the [spec](https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing) that dictates our proposed behavior already. Namely, emphasis added,

> **If used in an axis where the relevant [self-alignment property](https://drafts.csswg.org/css-align-3/#self-alignment-properties) applies** to the element
>
>> Produces the same size that would be obtained by the [self-alignment property](https://drafts.csswg.org/css-align-3/#self-alignment-properties) in that axis being set to [stretch](https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch) and all [sizing properties](https://drafts.csswg.org/css-sizing-3/#sizing-property) and [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing#propdef-aspect-ratio) being set to their initial values.

> Otherwise, if used in an axis where percentage sizes can resolve to a [definite](https://drafts.csswg.org/css-sizing-3/#definite) value
>
>>Behaves as 100%, except it sizes the [margin box](https://drafts.csswg.org/css-box-4/#margin-box) regardless of the value of [box-sizing](https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing).

When we are calculating the the flex-line cross-size, align-self doesn't apply! So we follow the 'Otherwise' 100% behavior. When we do so, the line ends up being the same width as the container, which has the same effect of stretching to the container in the end.

-- 
GitHub Notification of comment by davidsgrogan
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11784#issuecomment-2860598498 using your GitHub account


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

Received on Wednesday, 7 May 2025 22:33:04 UTC