[csswg-drafts] [css-grid] Overflow with auto-repeat and minmax() (#4043)

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

== [css-grid] Overflow with auto-repeat and minmax() ==
Imagine the following example:
```html
<div style="display: grid; width: 200px; border: solid thick;
            grid-template-columns: repeat(auto-fill, minmax(200px, 100px));
            grid-auto-rows: 100px;">
  <div style="background: magenta;"></div>
  <div style="background: cyan;"></div>
  <div style="background: yellow;"></div>
</div>
```

All implementations (Chromium, Firefox, WebKit and Edge) render it the same way. The use the 2nd argument of `minmax(200px, 100px)` to calculate the number of repetitions,
so they consider there are 2 columns. Then we have overflow because columns are 200px width.

![Screenshot of example rendering with 2 columns and overflow](https://user-images.githubusercontent.com/11602/59737868-86a4b380-925f-11e9-98c6-fc2fa60f5672.png)

I guess the reason for that is the [following text in the spec](https://drafts.csswg.org/css-grid/#auto-repeat):
> if  the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (**treating each track as its max track sizing function if that is definite** or as its minimum track sizing function otherwise, and taking gap into account)

The [*max track sizing function*](https://drafts.csswg.org/css-grid/#max-track-sizing-function) is:
> If the track was sized with a minmax() function, this is the second argument to that function

It's true that [`minmax()` definition](https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax) already talks about the case were min is bigger than max:
> If the max is less than the min, then the max will be floored by the min (essentially yielding minmax(min, min))

But it seems that none of the implementations catch that detail.

It seems we need to use the min in this case, so the grid of the example has only 1 column, unless there are some other weird implications from using the min in this case. So I guess that the spec text should be updated to be clearer about that and avoid similar misunderstandings in the future.

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

Received on Wednesday, 19 June 2019 04:58:49 UTC