CSS Tip

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

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));
  /* same as clamp(200px, auto, 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)); 
  /* same as clamp(max-content,70%, 600px) */
  width: calc-size(max-content,clamp(300px, 80%, 2*size)); 
  /* same as clamp(300px, 80%, 2*max-content) */
  width: calc-size(min-content,clamp(size + 50px, 100% - 40px, 700px)) 
  /* same as clamp(min-content + 50px, 100% - 40px, 700px) */
}

⚠️ Limited support (Chrome-only for now)

See the Pen clamp() with keyword values by Temani Afif (@t_afif) on CodePen.

More CSS Tips