[csswg-drafts] [css-grid-3] orthogonal item overflow in a row masonry (#13116)

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

== [css-grid-3] orthogonal item overflow in a row masonry ==
This issue is a follow up to https://github.com/w3c/csswg-drafts/issues/12843.

In the following example (please ignore the outdated "masonry" syntax notation):

```
<style>
    grid {
      display: inline-masonry;
      masonry-direction: row;
      grid-template-rows: auto auto min-content max-content;
      border: 1px solid;
    }
    item {
      writing-mode: vertical-rl;
    }
</style>
<grid>
  <item style="background-color: #89CFF0;">1</item>
  <item style="background-color: #FF6F61;">2 2</item>
  <item style="background-color: yellow;">3 3</item>
  <item style="background-color: #F4C542;">4</item>
  <item style="background-color: pink; grid-row:2/span 2">5 5</item>
  <item style="background-color: #B2C8A5; height:5ch; grid-row:span 3/4">6</item>
</grid>
```

We get the following rendering in Chromium:

<img width="77" height="80" alt="Image" src="https://github.com/user-attachments/assets/e3c9babb-d951-4139-b616-f8a84a43732b" />

The expectation is that the width of the container encompasses all items, however, the last item ends up overflowing.

The reason is that when we calculate the min size on the grid lines (i.e. masonry) container, we force all items to their max-content size per the resolution in https://github.com/w3c/csswg-drafts/issues/12843#issuecomment-3525601475. When an orthogonal item is forced to its max-content size, it will layout out with each item stacked on top of each other (for example, how item 2 is laid out in the image above).

For orthogonal items, the width that is produced by the max-content size here is actually smaller than the min-content size (how item 3 is laid out in the image above) in the perspective of the container.

As such, when laid out, item 3 ends up being sized at its min-content size rather than its max-content size, which ends up being wider, causing the subsequent items to overflow.

The proposal is to force orthogonal items to their min-content size instead of max-content size as part of the resolution in https://github.com/w3c/csswg-drafts/issues/12843#issuecomment-3525601475 to avoid overflow in mixed writing mode scenarios. This would guarantee the min-content size that is calculated on a grid lanes container is always as wide as possible, avoiding overflow in the example above.

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


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

Received on Monday, 17 November 2025 23:37:44 UTC