minmax fails (invalid property value)

Question

Chrome gives an invalid property value and doesn't respect the CSS:

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));

It also fails when auto is replaced with min-content and max-content.

It works as expected when auto is replaced by a fixed value e.g.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

This is surprising because both repeat and minmax support the keywords.

The html is simple

<div class='wrapper'>
  <div>...</div>
  <div>...</div>
</div>

and css

.wrapper {
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
}

Answer 1

When using auto-fill or auto-fit, there must be a definite min-size or max-size.

By "definite", the spec means:

A size that can be determined without measuring content.

^{https://www.w3.org/TR/css-sizing-3/#definite}

When you set both minmax arguments to content-based size, like this:

grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));

... that's a violation of the spec because there is no definite size.

Using min-content and max-content would result in the same error for the same reason.

As long as one value is definite, and the first value is not fr (see below), the rule is valid.

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill is given as the repetition number, 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 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 grid-gap into account).

If any number of repetitions would overflow, then 1 repetition.

Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement.

Otherwise, the specified track list repeats only once.