minmax 失败（无效的属性值）

Question

Chrome 提供 invalid property value 并且不尊重 CSS：

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

当auto 替换为min-content 和max-content 时也会失败。

当auto 被替换为固定值时，它会按预期工作，例如

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

这很令人惊讶，因为repeat 和minmax 都支持关键字。

html很简单

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

和css

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

Answer 1

使用auto-fill或auto-fit时，必须有明确的最小尺寸或最大尺寸。

通过“确定”，规范意味着：

无需测量内容即可确定的尺寸。

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

当您将两个 minmax 参数设置为基于内容的大小时，如下所示：

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

...这违反了规范，因为没有明确的尺寸。

使用min-content 和max-content 会因为同样的原因导致同样的错误。

只要一个值是确定的，并且第一个值不是fr（见下文），则规则有效。

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

当auto-fill作为重复数时，如果网格 容器在相关轴上有definite 大小或最大大小，则重复次数为 不会导致网格的最大可能正整数 溢出其网格容器（将每个轨道视为其最大轨道 尺寸函数，如果它是确定的或者作为它的最小轨道尺寸 否则功能，并考虑grid-gap）。

如果任何重复次数会溢出，则重复 1 次。

否则，如果网格容器在相关轴上有明确的最小尺寸，则重复次数是满足该最小要求的最小可能正整数。

否则，指定的曲目列表只重复一次。