[css-grid-3] orthogonal item overflow in a row masonry

[alisonmaher]

This issue is a follow up to #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:

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 #12843 (comment). 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 #12843 (comment) 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.

[Loirooriol]

This would guarantee the min-content size that is calculated on a grid lanes container is always as wide as possible

I don't think that necessarily the case if there is an aspect ratio.

[alisonmaher]

I don't think that necessarily the case if there is an aspect ratio.

Do you have an example in mind? Curious if that applies to just this orthogonal case, or to the original resolution in #12843 (comment), as well

[Loirooriol]

Adding item { aspect-ratio: 1; min-width: 0; },

Now the 2nd item is wider than the 3rd.

[alisonmaher]

Interesting, I'll need to play with that example along with the proposal to see how it plays out. I suspect since we would force everything to min-content, you'd still have items (outside of the third one) end up being three chars wide, so you'd end up with a wide enough container to hold it. At layout time, in your case, I think the items would happen to underflow since no item ended up getting laid out in that way.

Unless I misunderstand, and you're saying that we could end up with a case where forcing these orthogonal items to their max-content instead of min-content would actually produce a "wider" result in the perspective of the container.