[csswg-drafts] [css-sizing] Intrinsic min/max block sizes with aspect ratio? (#12333)

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

== [css-sizing] Intrinsic min/max block sizes with aspect ratio? ==
```html
<!DOCTYPE html>
<style>
canvas, div { display: block; border: solid cyan; height: 0; width: max-content; min-width: 0; aspect-ratio: 1; }
div::before { content: ""; display: block; width: 50px; height: 50px }
</style>
<canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas>
<canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas>
<div style="height: 0px; min-height: max-content"></div>
<div style="height: 100px; max-height: max-content"></div>
<script>
document.write([...document.querySelectorAll("canvas, div")].map(el => el.clientWidth + " x " + el.clientHeight).join("<br>"))
</script>
```

| Blink | WebKit |
| - | - |
| ![](https://github.com/user-attachments/assets/f1823412-8b5b-4618-b131-3b0c4dc07791) | ![](https://github.com/user-attachments/assets/0dae6510-6905-4ae8-bc5c-9580e75661cb) |

Is the behavior supposed to be different for a replaced element than for a non-replaced one?

What should the behavior be if I use `aspect-ratio: 2` instead?

| Blink | WebKit |
| - | - |
| ![](https://github.com/user-attachments/assets/dbbb966a-af5d-4df3-a56e-fb1ea7eee98e) | ![](https://github.com/user-attachments/assets/82fd2dbd-723a-4f19-9217-2a106c92d3b7) |

Back to `aspect-ratio: 1`, what should happen if I use `min-width: auto`?

| Blink | WebKit |
| - | - |
| ![](https://github.com/user-attachments/assets/1a5d5249-8d5e-46a0-a098-dbfa7afa412a) | ![](https://github.com/user-attachments/assets/b0be9ef0-1de1-48f9-85a1-aaa854c7dea9) |

CC @bfgeek 

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


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

Received on Friday, 13 June 2025 12:14:33 UTC