CSS min() and max()

min() and max() take a list of values and use the smallest or the largest one, deciding at the moment the page is shown.

min(): at most

1

width: min(100%, 600px);

“Be 100% of the parent, but never more than 600px”. It is the same as width: 100%; max-width: 600px;, in one line, and it can mix units freely.

1
2
3
4

<style>
  .box { width: min(90%, 300px); background: #d94a00; color: #fff; padding: 10px; margin-bottom: 8px; }
</style>
<div class="box">min(90%, 300px): at most 300px</div>

The width follows 90% of the Result panel until that would exceed 300px. Drag the corner of the Result panel narrower to see it shrink.

max(): at least

1

font-size: max(1rem, 2vw);

“At least 1rem, bigger if 2vw is bigger”. A floor that stops text from going tiny.

1

padding: max(1rem, 5vw);

Mixing three or more

min(100%, 60rem, 90vw) takes the smallest of three.

A centered container with side gutters

1
2
3
4

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

You can do math inside: 100% - 2rem is evaluated just like in calc() (no need to type calc inside min()). This makes a container that leaves a 1rem gutter on both sides in small screens and stops at 70rem.

Safe grid columns

1

grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

The min(100%, 16rem) stops a column’s minimum from being bigger than the container, which fixes the overflow that minmax(16rem, 1fr) has on tiny screens. See auto-fit.