CSS min(), max(), and clamp(): More Than Just Font Sizing

Kevin Powell's latest video digs into min(), max(), and clamp(), and it turns out these CSS functions are far more versatile than many of us first thought. When they were introduced, the hype was mostly around fluid font-size. However, since they are just math functions, you can apply them to any property that accepts numbers or lengths, opening up a lot of layout possibilities.

Mind-Bending But Tighter Code

Even simple cases can feel counterintuitive. Wanting to set a “maximum” often means reaching for min(), and finding that mental shift can lead to much tighter stylesheets. Interestingly, these functions can accept more than two arguments, though tracking which value wins becomes tricky. It would be a great DevTools enhancement if the browser could highlight the active value at any given viewport.

Another relief: you don’t always need calc() to perform arithmetic inside them. And while you can nest functions to enforce both a floor and a ceiling, clamp() is a far less convoluted way to achieve that sweet spot.

.el {
  width: 75%;
  max-width: 600px;

  /* tighter, but the change from max to min feels weird */
  width: min(75%, 600px);
}

Here's the embedded video for the full walkthrough:

Direct Link →