[csswg-drafts] [css-sizing] Does an indefinite intrinsic block size transfer to inline axis when `stretch` would do so? (#11387)

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

== [css-sizing] Does an indefinite intrinsic block size transfer to inline axis when `stretch` would do so? ==
See the testcase below.

There is an abspos with `top: 0; bottom: 0`. By default it stretches to fill the containing block, and this block size is used to compute its inline min/max-content sizes thru the aspect ratio of its contents.

However, what happens if the abspos gets `height: max-content`? At this point the block min/max-content sizes are undefined, since they depend on the inline size. So what to do?

 - Treat `height: max-content` as indefinite. Then contents can't resolve their percentage. This is what Firefox and Chrome do.
 - Treat `height: max-content` as `height: auto`. Then it stretches, and since the stretch size is definite, contents can resolve their percentage. This is what WebKit does.

Servo is currently like WebKit, but I think I prefer Blink's behavior.

```html
<!DOCTYPE html>
<style>
.wrapper { position: relative; width: 50px; height: 50px; border: solid; margin: 5px }
.abspos { position: absolute; top: 0; bottom: 0; }
canvas { background: cyan; height: 100% }
</style>
<div class="wrapper">
  <div class="abspos">
    <canvas width="25" height="25"></canvas>
  </div>
</div>
<div class="wrapper">
  <div class="abspos" style="height: -moz-available; height: -webkit-fill-available; height: stretch">
    <canvas width="25" height="25"></canvas>
  </div>
</div>
<div class="wrapper">
  <div class="abspos" style="height: min-content">
    <canvas width="25" height="25"></canvas>
  </div>
</div>
<div class="wrapper">
  <div class="abspos" style="height: max-content">
    <canvas width="25" height="25"></canvas>
  </div>
</div>
```

| Firefox | Chrome | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/c0befc5a-d8cc-4a34-a0ce-672e3b66150a) | ![](https://github.com/user-attachments/assets/16851d03-33f8-4fef-b51e-cc1833656a02) | ![](https://github.com/user-attachments/assets/db3d5076-46ae-4b64-95e5-493af10ccd58) |

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


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

Received on Tuesday, 17 December 2024 20:33:15 UTC