CSS min(), max(), clamp(): How to Use Them

CSS min(), max(), and clamp() are CSS functions that let you set property values with logic, such as “at least this, but no more than that.” You use them to create responsive, fluid layouts without writing multiple media queries. This guide explains how each function works, when to use them, and common pitfalls to avoid.

What Are min(), max(), and clamp()?

These are CSS comparison functions, part of the CSS Values and Units Module Level 4. They accept a comma-separated list of values and return a single value based on the function’s logic:

min(a, b) returns the smallest value.
max(a, b) returns the largest value.
clamp(min, val, max) returns val if it is between min and max; otherwise it returns the closest bound.

You can use them anywhere a CSS length, number, angle, or other value is allowed — for example, width, font-size, padding, margin, grid-template-columns, and even color (with rgb() or hsl() components). They are widely supported in all modern browsers since 2020.

How min() Works

min() picks the smallest value from its arguments. It is useful for setting an upper bound: “the element should be this wide, but never wider than that.”

Example: width: min(80%, 600px) — the element takes 80% of its container, but if that exceeds 600px, it caps at 600px. This is a classic responsive pattern for content columns.

You can use more than two arguments, and they can be mixed units: min(10vw, 200px, 5rem). The browser calculates each and picks the smallest. Note that min() takes the smallest value, so it acts as a maximum limit.

How max() Works

max() does the opposite: it picks the largest value. It sets a lower bound: “at least this big, but it can grow.”

Example: width: max(50%, 300px) — the element is at least 300px wide, but if 50% of the container is larger, it uses that. This is handy for ensuring a minimum size on small screens.

Like min(), you can pass multiple arguments and mix units. max() is less commonly used alone than min() or clamp(), but it shines when you need a guaranteed minimum.

How clamp() Works

clamp(MIN, VAL, MAX) is the most powerful of the three. It takes three values: a minimum, a preferred value, and a maximum. The browser uses VAL if it falls between MIN and MAX; otherwise it clamps to the nearest bound.

Example: font-size: clamp(1rem, 2vw + 1rem, 2rem) — the font size is at least 1rem, grows fluidly with the viewport, but never exceeds 2rem. This creates a fully responsive heading without media queries.

You can use any CSS value that supports comparison, including lengths, percentages, and even custom properties. The middle argument is usually a fluid value like vw or a percentage, but it can be a fixed value too.

How to Choose Which Function to Use

Think of the behavior you need:

Need a maximum cap? Use min().
Need a minimum floor? Use max().
Need both a floor and a cap with a fluid middle? Use clamp().

In practice, clamp() covers most fluid typography and layout needs. min() is great for widths and paddings that should shrink on small screens. max() is useful for ensuring a minimum size, like a button that never gets too small.

For fluid font sizes, a common formula is clamp(min-size, base + scale-factor * viewport-unit, max-size). For example, font-size: clamp(16px, 1rem + 1vw, 24px).

Common Problems and Misconceptions

Misunderstanding min as a minimum: min() returns the smallest value, so it acts as a maximum. Many beginners expect min(100%, 500px) to make the element at least 500px, but it actually caps it at 500px.
Using clamp() with reversed arguments: clamp(MAX, VAL, MIN) is invalid — the first argument must be the minimum, the last the maximum. The browser ignores the declaration if the order is wrong.
Mixing incompatible units: While you can mix units like px and vw, the comparison is only meaningful if the values are comparable. For example, min(10px, 2em) works because both are lengths, but min(10px, 2) is invalid.
Forgetting that clamp() can overflow: If VAL is less than MIN, the result is MIN; if greater than MAX, the result is MAX. This can cause unexpected behavior if you don’t plan the middle value carefully.
Using vw without a fallback: On very small or very large screens, pure vw can make text unreadable. Always pair it with clamp() to set sensible bounds.

Practical Examples with Code

Here are a few real-world uses:

/* Fluid container width */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

/* Responsive heading */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* Button that never gets too small */
.button {
  padding: max(0.5rem, 2vw) max(1rem, 3vw);
}

/* Grid columns that adapt */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

Notice the last example uses min() inside minmax() — a common pattern to prevent grid items from overflowing a small container.

Browser Support and Fallbacks

All modern browsers support these functions, including Chrome, Firefox, Safari, and Edge. For older browsers (pre-2020), you should provide a fallback declaration before the one using the function:

.element {
  width: 80%;
  width: min(80%, 600px);
}

The fallback is ignored by browsers that understand the function, and used by those that don’t. This is a safe progressive enhancement strategy.

Frequently Asked Questions

Can I use min(), max(), and clamp() with any CSS property?

Yes, as long as the property accepts a numeric value (length, percentage, number, angle, etc.). They work with width, height, font-size, padding, margin, gap, border-radius, and many others. They do not work with properties that expect keywords or strings.

What is the difference between clamp() and using min() and max() together?

clamp(MIN, VAL, MAX) is equivalent to max(MIN, min(VAL, MAX)). The clamp function is more readable and less error-prone, so prefer it when you need both a floor and a cap.

Do these functions work with custom properties (CSS variables)?

Yes, you can pass custom properties as arguments, e.g., width: min(var(--width), 500px). The browser evaluates the variable before applying the function.

Can I use these functions in media queries?

No, media queries do not accept these functions. They are for property values only. For responsive breakpoints, you still need media queries or newer container queries.

Why doesn’t my clamp() work in older browsers?

Older browsers (before 2020) do not support these functions. Provide a fallback declaration before the one using the function, and the browser will use the fallback if it doesn’t understand the newer syntax.

Are there any performance concerns with using these functions?

No, they are computed efficiently by the browser. Using them often reduces the need for media queries, which can improve performance by avoiding style recalculations.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →