minmax失败(无效的属性值)

Question

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

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

auto用min-contentand 替换时也会失败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.重复填充:auto-fill和auto-fit 重复

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

如果任何重复次数会溢出,则重复1次.

否则,如果网格容器在相关轴中具有确定的最小尺寸,则重复次数是满足该最小要求的最小可能正整数.

否则,指定的曲目列表仅重复一次.

原始答案 - 在问题被修改之前

问题是1fr无法设置为最小值minmax().

从规格:

minmax(min, max)

定义大于或等于min或小于等于的大小范围max.

如果max< min,则max忽略并minmax(min,max)视为min.

作为最大值,<flex>值设置轨道的flex因子; 它至少是无效的.

注意:此规范的未来级别可能允许<flex>最小值,并将更新轨道大小调整算法以正确解释此问题

<flex>

一个灵活的长度或是单位<flex>的尺寸fr,它代表网格容器中自由空间的一小部分.