minmax fails (invalid property value)

问题

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));
}

回答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.

---

Original Answer - before question was revised

The problem is that 1fr cannot be set to the minimum value in minmax().

From the spec:

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

If max < min, then max is ignored and minmax(min,max) is treated as min.

As a maximum, a <flex> value sets the track’s flex factor; it is invalid as a minimum.

Note: A future level of this spec may allow <flex> minimums, and will update the track sizing algorithm to account for this correctly

<flex>

A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the free space in the grid container.

来源：https://stackoverflow.com/questions/45333922/minmax-fails-invalid-property-value