Dynamic Sizing with CSS min()

It wasn't that long ago that CSS functions like min() (or max(), or clamp()) were entirely unthinkable: these open up access to dynamic values and functionality that could only be achieved historically through the use of JavaScript. Now, they play a really important role in our ability to develop fluid, responsive layouts, elegantly adapting across different devices.

Understanding min()

In the case of min(), and as you can probably guess from the name, we get a function which allows us to provide a set of different values, and expect that the browser will apply whichever is the smallest amongst them.

Here's a quick example:

.element {  width: min(100%, 50rem);}

Here, we're setting the with of an element to be the lesser of either 100% (i.e., the full width of the containing element), or 50rem. So, if the container is narrower than 50rem, then the width of .element will be whatever the container width is (100%). However, if the containing element is wider than 50rem, then the browser will apply the other width value (50rem: smaller than 100%) to .element.

This means that .element will grow fluidly with the width of the container on small screens, and then restrict itself at a maximum of 50rem as the screen (and containing element)'s width increases.

Practical Applications

Responsive Typography

One of the most common uses I've seen for min() has been in responsive typography, allowing font sizes to adjust to different screen widths without growing too large or too small.

Take this snippet, for example:

body {  font-size: min(4vw, 1.8rem);}

What we're doing here is allowing the font size to increase as the viewport width does, with a capped maximum of 1.8rem, which (hopefully) means that we can balance the scale and legibility of the typography.

Responsive Containers

I already touched upon this at the beginning of this article, but really the area where the use of min() shines is in implementing responsive containers and layouts.

Imagine a card component, which should occupy a portion of the viewport width up until a predefined maximum width to maintain content density and readability. Using min(), it might look something like this:

.card {  width: min(90vw, 30rem);}

This ensures that our card occupies 90% of the viewport, and is responsive by not exceeding 30rem in width. What's particularly impressive about this (and I've said the same before about calc()) is that there's no need whatsoever for media queries in layouts like this, making your code simpler, quicker, and easier to understand.

Browser Support and Workarounds

Whilst it's fair to say that browser support is very good (as long as you don't need to support legacy Internet Explorer versions), you should still exercise a little caution when using calc(), especially if it makes up a key part of your overall website layout. You could argue that anybody visiting your application on an older device is probably used to the web being broken for them anyway, but nevertheless, there are alternative strategies we can use in conjunction with min().

The simplest of these is just to fall back to using media queries like this:

.element {  width: 100%;}@media (min-width: 50rem) {  .element {    width: 50rem;  }}

This mimics the behaviour we discussed in one of my earlier examples above. Even simpler still when it comes to width and height dimensions, you can simply fallback to more traditional min‑* and max‑* properties.

The example above can be achieved just like this too:

.element {  width: 100%;  max-width: 50rem;}

So, in these simpler layout‑based uses, you may not need to use min() (or max()) at all...

Having re‑read this sometime after it was published, I should also say: min() and max() can both accept any number of different values. I tend to write examples with two simply because it's easier to say, "This value is bigger than that" (or vice versa). You could include any number of different viewport, fixed, fluid, etc values within the function. The browser will simply use whichever is the smallest at that point in time.