How to use the "auto" value with clamp()

February 05, 2026

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.

With the new calc-size(), we can allow such values within 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.

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)

• Responsive Pyramidal Grid of Hexagon Shapes (and more!) A responsive pyramidal grid of various shapes without media queries. January 27, 2026
• Recreating the component and its
  Using basic HTML and a few lines of CSS to recreate the fieldset component. January 21, 2026