带有 auto 的 css 钳位功能不能作为最小值、值、最大值工作

Question

我正在使用 cssclamp()来调整 div 的高度，但它无法按预期工作。

.container{
    height: clamp(200px, auto, 400px);
}

但效果很好

.container{
    min-height: 200px;
    height: auto;
    max-height: 400px;
}

从文档css Clip(): MDN Web Docs中，它说它可以完成min, value and max. 为什么它不起作用？

Answer 1

如果你检查语法你可以看到：

clamp( <calc-sum>#{3} )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

auto不是逻辑语法的一部分，因为您无法auto与像素值（或任何长度）进行比较

您认为浏览器将首先应用auto高度，以便根据内容查找高度值，然后将该值转换为px，然后应用clamp()该值，但事实并非如此。事实并非如此。

浏览器将尝试首先解析clamp(200px, auto, 400px)哪个无效，因为auto它不是<calc-value>. 我们甚至不需要知道它应用到哪个属性。