- From: Oriol Brufau via GitHub <noreply@w3.org>
- Date: Mon, 22 Sep 2025 21:51:10 +0000
- To: public-css-archive@w3.org
I wonder if masonry needs some kind of multi-pass redistribution (but of course seems scary for performance).
It's not just when the container has `width: min-content`:
```html
<!DOCTYPE html>
<style>
.masonry {
display: masonry;
background: gray;
masonry-direction: row;
grid-template-rows: auto;
width: 200px;
padding: 10px;
}
</style>
<div class="masonry">
<div style="background: lightskyblue;">lorem ipsum sit amet</div>
<div style="background: lightcoral;">lorem ipsum sit amet</div>
</div>
```
<img width="291" height="52" src="https://github.com/user-attachments/assets/958bb0bf-a4ae-48e9-b719-5efcb46b5317" />
Overflow could have been avoided by breaking lines in the items:
<img width="234" height="69" src="https://github.com/user-attachments/assets/29d35c5b-68f9-419e-bf2e-f15239c8cd8b" />
--
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12843#issuecomment-3321604443 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 22 September 2025 21:51:10 UTC