[css-grid] Automatic minimum sizes should never force grid items to become bigger than the tracks they span

[Loirooriol]

https://drafts.csswg.org/css-grid/#min-size-auto says

to prevent the content-based minimum size from forcing overflow of its fixed-size grid area, if in a given dimension the grid item spans only grid tracks that have a fixed max track sizing function, then [... the content-based minimum size is ...] further clamped to less than or equal to the stretch fit into the grid area’s maximum size in that dimension, as represented by the sum of those grid tracks’ max track sizing functions

In fact this is not correct. I agree that clamping by the sum of max track sizes seems a good heuristic, but not doing so wouldn't force the item to overflow its fixed-size grid area. That's because the content-based minimum size is only used when an item spans a track with an auto min track size, and if all spanned tracks have a fixed max track sizes then they are not flexible. Therefore, https://drafts.csswg.org/css-grid/#algo-spanning-items ensures the sum of the spanned track sizes will at least be the minimum contribution of the item, which is greater or equal than the outer size given by the minimum size. So not clamping would just imply that both the item and the tracks it spans would be larger, but no overflow.

So the paradox is that when there is clamping, it's not actually needed to prevent overflow; but when there is no clamping because some track doesn't have a fixed max size, then the automatic minimum size may force a grid item to become bigger than the tracks it spans.

Basically, this happens when

• A grid item spans multiple tracks
• At least one of the spanned tracks is flexible, thus the item is not handled in https://drafts.csswg.org/css-grid/#algo-spanning-items
• All the spanned tracks which are flexible have a fixed min track sizing function, thus they don't grow in https://drafts.csswg.org/css-grid/#algo-spanning-flex-items
• At least one of the spanned non-flexible tracks has an auto minimum, thus triggering the automatic minimum size to be the content-based minimum size
• The content-based minimum size of the item is big enough.

Example: https://jsfiddle.net/jLfwga63/

<div id="grid">
  <div id="item"></div>
</div>

#grid {
  display: grid;
  width: 0;
  grid-template-columns: auto minmax(0px, 1fr);
}
#item {
  grid-column: 1 / 3;
  background: cyan;
}
#item::before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
}

The automatic minimum width is 100px, but both columns are 0px wide, so the item is forced to overflow. This seems bad, in order to prevent it, consider dropping

distributing space only to flexible tracks (i.e. treating all other tracks as having a fixed sizing function of their current base size)

at least in case all spanned flexible tracks have a fixed min track sizing function.

[fantasai]

Here's the comment summarizing the principles that led to the text handling flexible tracks: #2177 (comment)

As far as we can tell, there are two principles here that we want to follow:

• Flexible tracks absorb spanning items' content, leaving auto tracks tightly-wrapped around their contents insofar as possible. (See [css-grid] Grid track sizing items spanning a flexible track #2177 (comment))
• Content-sized tracks such as auto tracks and flexible tracks with a minimum (e.g. minmax(min-content, 1fr) honor their minimum and ensure that no item spanning them causes overflow.

[fantasai]

Update: In #4783 we reverted this fix and made a different one (clamping the automatic minimum size to zero when it crosses flexible tracks).