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

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

== [css-sizing] It's false that `height: stretch` behaves as `stretch` alignment ==
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing


> - 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/#propdef-aspect-ratio) being set to their initial values.


We have interoperability against this:

```html
<!DOCTYPE html>
<style>
.container { display: inline-flex; vertical-align: top; width: 100px; height: 100px; border: solid; flex-wrap: wrap; align-content: start }
.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch }
</style>
<div class="container">
  <div class="stretch" style="width: 75px; border: solid cyan"></div>
  <div class="stretch" style="width: 75px; border: solid magenta"></div>
</div>
<div class="container">
  <div class="stretch" style="width: 75px; border: solid cyan"></div>
  <div style="border: solid orange; height: 150px"></div>
  <div class="stretch" style="width: 75px; border: solid magenta"></div>
</div>
<div class="container">
  <div style="width: 75px; border: solid cyan;"></div>
  <div style="width: 75px; border: solid magenta"></div>
</div>
<div class="container">
  <div style="width: 75px; border: solid cyan;"></div>
  <div style="border: solid orange; height: 50px"></div>
  <div style="width: 75px; border: solid magenta"></div>
</div>
```

Gecko, Blink and WebKit agree:
 - When computing the size of the flex lines: `height: stretch` stretches against the containing block, while `align-self: stretch` doesn't stretch.
 - Once we know the size of the flex lines: `height: stretch` keeps stretching against the containing block, while `align-self: stretch` stretches against the line.

![](https://github.com/user-attachments/assets/654b93e6-f49a-45f5-af82-b29c4282e5da)

The difference is when the flex container doesn't have a definite height (remove `height: 100px`):

 - Gecko and Blink:
    ![](https://github.com/user-attachments/assets/99521803-1a39-4d20-9e1e-8aa2fb7e8c33)
- WebKit: (stretches to fill window height)
   ![](https://github.com/user-attachments/assets/3b868c48-12ce-4d76-91b9-29bf9b3b92c2)



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11784 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 16:05:38 UTC