References

Beginner-friendly references for web development, with live, editable examples.

The CSS min() function

Function CSS All modern browsers Updated
Quick answer

The CSS min() function returns the smallest of the values you give it, e.g. min(100%, 600px). Counterintuitively, that caps a size — the element is 100% wide but never more than 600px — so min() behaves like a max-width you can drop straight into any property. It accepts mixed units and basic math.

Overview

min() picks the smallest of a comma-separated list of values. The part that bends people's brains at first: because it returns the smaller value, it effectively sets a maximum. width: min(100%, 600px) means "100% wide, but cap it at 600px" — the same idea as max-width, except it works inline in any sizing property.

That makes it a tidy one-liner for responsive containers: min(100%, 60ch) fills a narrow screen and stops at a comfortable reading width on a wide one, in a single value with no separate max-width declaration.

It accepts mixed units, just like calc(), and you can even nest math inside it. Its mirror image is max(), which sets a floor, and the two together are what clamp() wraps up.

Syntax

/* full width, capped at 600px */
.container {
  width: min(100%, 600px);
  margin-inline: auto;
}

Example

Live example 
<style>
  .container {
    width: min(100%, 280px);
    margin-inline: auto;
    background: #1c7ce9;
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    font: 15px/1.5 system-ui, sans-serif;
  }
</style>
<div class="container">width: min(100%, 280px) — full width, capped at 280px</div>

Best practices

  • Remember min() sets a maximum — the smaller value wins, so it behaves like max-width.
  • Use width: min(100%, 60ch) for a responsive, readable container in a single line.
  • Mix units freely, e.g. min(90vw, 1100px), the same way you would in calc().
  • Reach for clamp() when you need both a floor and a ceiling instead of just one.

Frequently asked questions

What does the CSS min() function do?
It returns the smallest of its arguments. Because the smaller value wins, it caps a size — min(100%, 600px) is full width but never over 600px.
Why does min() set a maximum size?
It picks the smaller value. When one option is a percentage that can grow, capping it at a smaller fixed value enforces a maximum, just like max-width.
Can min() mix units?
Yes, like calc(). You can compare a percentage with a pixel value, e.g. min(100%, 600px), and even include math.
What is the difference between min() and max()?
min() returns the smallest value (capping a size); max() returns the largest (enforcing a minimum).
max() minmax()