CSS min() Function

CSS min() Function

The CSS min() function compares two or more values and uses the smallest result. It is useful for creating flexible dimensions that can grow with the available space without becoming larger than a preferred limit.

The values supplied to min() can use different compatible units and can include mathematical expressions or other CSS functions.

min() Syntax

The min() function accepts two or more comma-separated values or expressions.

property: min(value1, value2);

For example, an element can use whichever is smaller: 100% of the available width or 800px.

.content {
  width: min(100%, 800px);
}

When the available width is less than 800px, the element uses 100%. When 100% would exceed 800px, the element uses 800px.

How min() Works

The browser evaluates each expression passed to min() and selects the smallest result.

.box {
  width: min(60%, 500px);
}

If 60% resolves to 420px, the resulting width is 420px because it is smaller than 500px.

If 60% resolves to 600px, the resulting width is 500px.

This allows a single declaration to respond automatically to the space available to the element.

Comparing Two Values

A common use of min() is to compare a flexible value with a fixed upper size.

.article {
  width: min(90%, 900px);
}

The article can occupy 90% of its available width on smaller screens but will not become wider than 900px.

This pattern is useful for articles, forms, cards, dialogs, and other content that should remain flexible while having a practical maximum width.

Comparing Multiple Values

The min() function is not limited to two arguments. It can compare several compatible values.

.box {
  width: min(90%, 60rem, 1000px);
}

The browser evaluates all three values and uses whichever one produces the smallest result in the current context.

Additional values are useful when a design needs to account for several possible constraints, but unnecessary comparisons can make a declaration harder to understand.

Using Different Units

The arguments to min() do not need to use the same unit. Compatible values can be compared after the browser resolves them.

.content {
  width: min(90vw, 70rem);
}

The browser compares a viewport-relative width with a root-font-relative width and uses the smaller result.

Other compatible combinations can include percentages, pixels, em, rem, viewport units, and calculated expressions.

.panel {
  padding: min(5vw, 40px);
}

Here, the padding can respond to the viewport while being limited to whichever of the two values is smaller.

Responsive Sizing

The min() function can create responsive dimensions without requiring a media query for every size change.

.card {
  width: min(100%, 600px);
}

The card remains within the available width on smaller containers and stops growing when the competing 600px value becomes smaller.

The same technique can be used with other properties that accept compatible numerical values.

.section {
  padding-inline: min(5vw, 50px);
}

The inline padding responds to the viewport but does not exceed the smaller value selected by the function.

min() with Custom Properties

Custom properties can provide one or more arguments to min().

:root {
  --content-width: 900px;
}
.content {
  width: min(100%, var(--content-width));
}

Changing --content-width updates the size limit everywhere the custom property is used.

Multiple reusable values can also participate in the comparison.

:root {
  --preferred-width: 90%;
  --content-width: 900px;
}
.content {
  width: min(var(--preferred-width), var(--content-width));
}

This keeps the sizing values separate from the declaration that compares them.

min() with Calculations

Mathematical expressions can be used as arguments to min().

.content {
  width: min(100% - 40px, 900px);
}

CSS math functions allow mathematical expressions inside their arguments, so an additional calc() wrapper is not required for this calculation.

You can still use calc() when it improves readability or when a calculated value is being reused as part of a larger expression.

.content {
  width: min(calc(100% - 40px), 900px);
}

Both forms express a comparison between the calculated available width and 900px.

min() and max-width

A common responsive pattern uses width together with max-width.

.content {
  width: 100%;
  max-width: 900px;
}

For many layouts, min() can express a similar size choice in one width declaration.

.content {
  width: min(100%, 900px);
}

These approaches are not interchangeable in every situation because width and max-width participate differently in CSS sizing. Choose the form that most clearly represents the intended constraint.

min() Practices

CSS min() Example

The following example gives a box a width of either 90% or 600px, whichever is smaller.

.box {
  width: min(90%, 600px);
}

Drag the divider between the code and result panes to change the preview width. On a narrow preview, the percentage becomes the smaller value. On a wider preview, 600px becomes the smaller value and prevents the box from continuing to grow.