minmax失败(无效的属性值) [英] minmax fails (invalid property value)

问题描述

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

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

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

将auto替换为min-content和max-content时，也会失败.

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

将auto替换为固定值(如

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

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

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

html很简单

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

和CSS

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

推荐答案

使用auto-fill或auto-fit时，必须有一定的最小或最大尺寸.

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}

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

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.

由于相同的原因，使用min-content和max-content会导致相同的错误.

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

只要一个值是确定的，并且第一个值不是fr(请参见下文)，则该规则有效.

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

7.2.2.2.重复填充:auto-fill和auto-fit 重复

当auto-fill作为重复数时，如果网格 容器的尺寸为 确定 大小或相关轴上的最大尺寸，则重复次数为 最大可能的正整数，不会导致网格 溢出其网格容器(将每个轨道作为其最大轨道进行处理 尺寸函数(如果是确定的)或其最小轨道尺寸 否则，并考虑grid-gap).

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).

如果任何数量的重复将溢出，则将重复1次.

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.

这篇关于minmax失败(无效的属性值)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！