[csswg-drafts] [css-grid] Automatic minimum sizes should never force grid items to become bigger than the tracks they span (#3705)

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

== [css-grid] Automatic minimum sizes should never force grid items to become bigger than the tracks they span ==
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/

```html
<div id="grid">
  <div id="item"></div>
</div>
```
```css
#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.


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

Received on Monday, 4 March 2019 21:31:09 UTC