1559186 - `repeat` with `auto-fill`, `minmax` and max-value being a `percentage` overflows instead of wrapping

Status: NEW

(Core :: Layout, defect, P3)

Description

[zyclotrop.j]

Attachment: css-grid-error.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

Steps to reproduce:

Use grid-template-columns: repeat(auto-fill, minmax(<X>px, <Y>%));
For example: grid-template-columns: repeat(auto-fill, minmax(400px, 25%));

Demo: https://codepen.io/anon/pen/XLmXeL

Actual results:

There are more grid-columns created than fit the grid.
To be exact, there are always as many columns created as would fit the maximum-value (25% -> 4 columns, 20% -> 5 columns, ...).
Each column takes the minimum-value as width (in the example above 400px).
This makes the grid overflow! It also prevents the intended wrapping.

Expected results:

Items are at least Xpx (eg 400px), but at most take Y% (eg 25%) of the grid.
When Xpx is bigger than Y% (eg with grid-width 800px -> 400px > 25%), Xpx is used (https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax: "If max < min, then max is ignored and minmax(min,max) is treated as min.")
Therefore the auto-fill will create at most Y% columns (eg 4 columns at 25%, 5 columns at 20%, 10 columns at 10%, ...), but there might be fewer, given the width of the grid (eg for a grid with with 800px and X = 400, there should be two).
Each column is at least Xpx (eg 400px).
This way items wrap nicely and no item is placed auto-side the grid.

Comment 1

[zyclotrop.j]

Opened same issue for Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=973906

Comment 2

[Timea Cernea [:tbabos][inactive]]

Reproduced on latest Nightly, Beta and Release on Windows 10 x64. Setting up a component for this.
Thanks for the report!

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Daniel Holbert [:dholbert]]

Looks like rego filed a spec issue to clarify this:
https://github.com/w3c/csswg-drafts/issues/4043

Comment 5

[zyclotrop.j]

Just FYI, the spec issue has been clarified and accepted (see https://github.com/w3c/csswg-drafts/issues/4043#issuecomment-556167196).