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

I have been trying this approach on Servo. Not completely there yet, but seems doable, just more complex.

For example, when the spec says

> If the flex item has [align-self: stretch](https://drafts.csswg.org/css-flexbox-1/#propdef-align-self), redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

Then it's not just `align-self: stretch`, it's also a `stretch` preferred cross size (but not a `stretch` min/max cross sizes).

```html
<!DOCTYPE html>
<div style="display: flex; flex-wrap: wrap; width: 100px; height: 50px; border: solid; align-content: center">
  <div style="border: solid cyan; min-width: 0; align-self: center; height: stretch">
    <div style="height: 75%; background: magenta">aaaaa</div>
  </div>
</div>
<div style="display: flex; flex-wrap: wrap; width: 100px; height: 50px; border: solid; align-content: center">
  <div style="border: solid cyan; min-width: 0; align-self: center; min-height: stretch">
    <div style="height: 75%; background: magenta">aaaaa</div>
  </div>
</div>
```

![](https://github.com/user-attachments/assets/324b2b00-6a49-472b-8269-6bb4c0724a42)

I have also notices a behavior change for `fit-content`, is this desirable/web-compatible?

```html
<!DOCTYPE html>
<div style="display: flex; flex-flow: column wrap; width: 100px; height: 100px; border: solid">
  <div style="border: solid magenta; width: fit-content">aaaaa aaaaa aaaaa aaaaa</div>
  <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
<div style="display: flex; flex-flow: column wrap; width: 100px; height: 100px; border: solid">
  <div style="border: solid magenta; align-self: start">aaaaa aaaaa aaaaa aaaaa</div>
  <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
```

| Old Blink | Current Blink |
| - | - |
| ![](https://github.com/user-attachments/assets/41866306-cd74-48b6-8ce4-32c18a3726f9) | ![](https://github.com/user-attachments/assets/81edada2-98d9-47b0-b1db-8b64d7eca1cf) |

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


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

Received on Wednesday, 18 June 2025 15:36:22 UTC