[css-grid-3][masonry] item overflow in a row masonry #12843
Description
In the following test case:
<!DOCTYPE html>
<style>
.masonry {
display: masonry;
background: gray;
masonry-direction: row;
grid-template-rows: auto auto auto;
width: min-content;
padding: 10px;
}
</style>
<div class="masonry">
<div style="background: lightskyblue;">Number 1</div>
<div style="background: lightcoral;">Number 2</div>
<div style="background: lightgreen;">Number 3</div>
<div style="grid-row: span 2; background: brown;"> Number 4</div>
</div>
</html>
We get the following rendering in Chromium, where the items end up overflowing the container, which doesn't match what happens in Grid:
The reasoning is that when we calculate min/max sizes for the container, we force the items to their min content size to determine the result of width: min-content on the container.
At layout time, the container is sized to its min-content size. Items in a row masonry container are constrained by this in the inline direction, rather than what a column track would be constrained by under this condition, like it does in grid.
In the masonry axis, items are sized based by the fit-content definition, which in this case, ends up being max-content. So at layout time, the items are sized under max-content in the masonry axis and end up overflowing the container in the inline direction.
We don't run into this in grid because the constraint space for grids is constrained by tracks in both directions, which ends up enforcing the min-content constraint on the items in the inline direction.
The output we get above technically matches the spec, but is this the behavior we want?
CC @celestepan