[csswg-drafts] [css-grid] minmax(auto, min-content) under a max-content constraint (#3565)

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

== [css-grid] minmax(auto,min-content) under a max-content constraint ==
Consider this grid: https://jsfiddle.net/xnvrk7h8/

```css
.grid {
  display: grid;
  grid: auto / minmax(auto, min-content);
  float: left;
  border: 3px solid;
}
.item {
  background: blue;
}
.float {
  float: left;
  width: 50px;
  height: 50px;
}
```
```html
<div class="grid">
  <div class="item">
    <div class="float"></div>
    <div class="float"></div>
  </div>
</div>
```

`float: left` sizes the grid under a max-content constraint (assuming the window is wide enough).

The grid item has a max-content width of of 100px when the floats are in the same line, and a min-content of 50px when they are in different lines.

According to https://drafts.csswg.org/css-grid/#algo-single-span-items,

> If the track has an `auto` min track sizing function and the grid container is being sized under a min/max-content constraint, set the track’s base size to the maximum of its items’ min/max-content contributions, respectively, each limited by the max track sizing function if that is fixed and ultimately floored by its minimum contribution.

The track does have an `auto` min track sizing function and the grid container is being sized under a max-content constraint. So the track’s base size should be set to 100px. This is not limited by `min-content` because it's not fixed, and the minimum contribution is less than 100px:

> The minimum contribution of an item is the outer size that would result from assuming the item’s used minimum size (min-width or min-height, whichever matches the relevant axis) as its preferred size (width or height, whichever matches the relevant axis) if its computed preferred size behaves as auto, or else the item’s min-content contribution.

Here the computed `width` is `auto`, and the used value of `min-width: auto` is the [content size suggestion](https://drafts.csswg.org/css-grid/#content-size-suggestion), 50px.

> If the track has a `min-content` max track sizing function, set its growth limit to the maximum of the items’ min-content contributions.

So the growth limit is initially set to 50px, but

> if a track’s growth limit is now less than its base size, increase the growth limit to match the base size.

So both the base size and the growth limit should be 100px, the track is frozen, and the rest of the algorithm doesn't seem relevant.

However, this is not what implementations do:

![results](https://user-images.githubusercontent.com/7477678/51913679-615df880-23d7-11e9-8f98-49d2349763d0.gif)

Note that in Firefox the column is 50px wide but the grid container is 100px wide, so strange, @MatsPalmgren. This is solved by using `min-width: 0` in the grid item, which alters the minimum contribution but shouldn't affect the result.

Is my understanding of the spec correct? Should it be changed to match implementations?

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

Received on Tuesday, 29 January 2019 14:13:37 UTC