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

Question

我正在使用 css clamp() 来调整我的 div 的高度，但它没有按预期工作。

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

但在

时效果很好

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

在文档 css clamp(): MDN Web Docs 中，它说它完成了 min, value and max 的工作。为什么它不起作用？

Answer 1

如果你检查 the syntax 你可以看到：

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>。我们甚至不需要知道它应用于哪个属性。

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

css clamp function with auto not working as min, value, max

html

css

clamp