如何使用 "auto" 值与 clamp()

February 05, 2026

2026 年 2 月 5 日

If you have tried the code below, you know it doesn't work:

如果您尝试过下面的代码，您就会知道它不起作用：

.box { width: clamp(200px, auto, 400px);}

clamp() accepts only calculations, and values such as auto, min-content, and max-content aren't allowed. They make the entire value invalid.

clamp() 只接受计算值，像 auto、min-content 和 max-content 这样的值是不允许的。它们会使整个值无效。

With the new calc-size(), we can allow such values within clamp().

有了新的 calc-size()，我们就可以在 clamp() 中允许这样的值。

.box { width: calc-size(auto,clamp(200px, size, 400px)); }

The first argument of calc-size() can be any calculation or a sizing keywords. The second argument is a calculation where size refers to the first argument.

calc-size() 的第一个参数可以是任何计算或尺寸关键字。第二个参数是一个计算，其中 size 指的是第一个参数。

You can have endless combinations.

您可以有无穷无尽的组合。

.box { width: calc-size(max-content,clamp(size, 70%, 600px));  width: calc-size(max-content,clamp(300px, 80%, 2*size));   width: calc-size(min-content,clamp(size + 50px, 100% - 40px, 700px));  width: calc-size(max-content,clamp(size,80%, 2*size)) }

⚠️ Limited support (Chrome-only for now)

⚠️ 有限支持（目前仅限 Chrome）

• Responsive Pyramidal Grid of Hexagon Shapes (and more!) A responsive pyramidal grid of various shapes without media queries. January 27, 2026
• Responsive Pyramidal Grid of Hexagon Shapes (and more!) 无需媒体查询的各种形状的响应式金字塔网格。2026 年 1 月 27 日
• Recreating the component and its
  Using basic HTML and a few lines of CSS to recreate the fieldset component. January 21, 2026
• Recreating the component and its
  使用基本的 HTML 和几行 CSS 重新创建 fieldset 组件。2026 年 1 月 21 日