在 CSS 中，clamp() 是一个非常实用的函数，它可以在最小值、理想值和最大值之间自动选择一个合适的结果，因此常被用来 实现响应式尺寸控制。例如限制元素宽度、字体大小或间距等。不过，当我们尝试把 auto 、min-content 或 max-content 这样的 内在尺寸关键词 与 clamp() 结合使用时，就会遇到一个问题。
例如下面这段代码，看起来似乎是合理的写法：
.box {
width: clamp(200px, auto, 400px);
}
但实际上，这段代码是无效的。原因在于 clamp() 只能接受可计算的值，而 auto、min-content、max-content 这些值并不属于可计算类型。一旦把它们直接放进 clamp()，整个属性声明都会失效。
幸运的是，随着新的 calc-size() 函数 出现，我们终于有了一种方法，可以让这些尺寸关键字参与到 clamp() 的计算中。借助 calc-size()，我们不仅可以使用 auto，还可以灵活地组合 min-content、max-content 等值，从而实现更强大的尺寸控制。
在接下来的内容中，我们将一起看看 calc-size() 是如何工作的，以及如何利用它在 clamp() 中安全地使用 auto 和其他尺寸关键字。
calc-size() 是如何工作的
要理解为什么 calc-size() 可以解决这个问题，我们需要先看看 它是如何工作的。
calc-size() 的设计目标，就是让原本不能参与计算的尺寸关键字（例如 auto、min-content、max-content）也能出现在计算表达式中。它的基本结构如下：
calc-size(<basis>, <calculation>)
其中：
-
第一个参数（
basis） ：可以是一个尺寸关键字，或者任何合法的尺寸值 -
第二个参数（
calculation） ：是一个计算表达式，其中可以使用size这个占位符来引用第一个参数
简单来说，calc-size() 会先把第一个参数当作一个“基础尺寸”，然后在第二个参数中通过 size 来引用它并进行计算。
例如：
.box {
width: calc-size(auto, clamp(200px, size, 400px));
}
在这个例子中：
-
auto是基础尺寸（basis） -
size代表auto -
clamp(200px, size, 400px)实际上相当于clamp(200px, auto, 400px)
也就是说，calc-size() 充当了一个桥梁，让原本不能放进 clamp() 的值，也可以安全地参与计算。
理解这一点之后，你会发现它其实非常灵活。例如，我们可以基于 max-content 做计算：
.box {
width: calc-size(max-content, clamp(size, 70%, 600px));
}
这里的逻辑就是：
-
以
max-content作为基础尺寸 -
然后限制它的结果不能小于自身、不能大于
600px，同时优先使用70%
我们甚至可以在计算中对这个尺寸进行运算：
.box {
width: calc-size(max-content, clamp(300px, 80%, 2 * size));
}
在这个例子中，size 代表 max-content，因此 2 * size 实际上就是 2 * max-content。
如何在 clamp() 中使用内关尺寸
calc-size() 的核心思想其实很简单：先定义一个尺寸关键字作为基础，然后在计算表达式中通过 size 来引用它并进行运算。
正因为如此，它可以把原本不能参与计算的尺寸关键字，安全地带入 clamp() 的计算逻辑中。利用这种机制，我们可以组合出多种不同的写法，例如：
.box {
width: calc-size(max-content, clamp(size, 70%, 600px));
/* 等同于 clamp(max-content, 70%, 600px) */
width: calc-size(max-content, clamp(300px, 80%, 2 * size));
/* 等同于 clamp(300px, 80%, 2 * max-content) */
width: calc-size(min-content, clamp(size + 50px, 100% - 40px, 700px));
/* 等同于 clamp(min-content + 50px, 100% - 40px, 700px) */
width: calc-size(max-content, clamp(size, 80%, 2 * size));
/* 等同于 clamp(max-content, 80%, 2 * max-content) */
}
Demo 地址：codepen.io/airen/full/…
总结
clamp() 在响应式布局中非常实用，但它只能接受可计算的值。因此像 auto、min-content、max-content 这样的尺寸关键字无法直接放入 clamp() 中，否则整个声明会变成无效。calc-size() 的出现解决了这个限制，它允许我们先定义一个基础尺寸，再在计算表达式中通过 size 引用这个值，从而让这些原本不能参与计算的关键字也能用于 clamp() 或其他数学表达式中。
通过这种方式，我们不仅可以在 clamp() 中使用 auto，还可以基于 min-content 或 max-content 进行更灵活的尺寸控制。不过需要注意的是，目前 calc-size() 的浏览器支持仍然比较有限（主要在 Chrome 中可用），因此在实际项目中更适合作为一种渐进增强的特性来使用。
