CSS min() Function

The min() function allows you to select the smallest (most negative) value from a list of comma-separated expressions.

Just like its sibling function, max(), the name of this function can be confusing at first. Because it always chooses the smallest value provided, you actually use min() to set a maximum cap on an element.

For example, a very common responsive design pattern is wanting a container to take up the full width of the screen on mobile devices, but capping it at a readable width on large desktop monitors. You could write width: min(100%, 800px). The browser evaluates both values. If the screen is 1200px wide, 100% equals 1200px. Since 800px is the smaller value, the browser caps the width at 800px. But if the screen shrinks to 400px, 100% equals 400px. Since 400px is now the smaller value, the browser chooses 100%.

This makes min() an incredibly elegant way to build fluid, responsive components without having to write separate media queries or use the traditional max-width property.

Here's an example of a responsive box using min(). Try resizing your browser window to see how it fluidly shrinks to fit the container, but never grows wider than 600px:

How It Works

The min() function accepts one or more comma-separated calculations. Its true power comes from the ability to mix and match different units. Comparing a relative unit (like a percentage or vw) to an absolute unit (like px or rem) is the standard way to use it.

Similar to the calc() function, min() evaluates mathematical expressions on the fly. You can write equations directly inside the arguments, such as min(100vw - 40px, 600px).

If you need to establish both a minimum and a maximum boundary simultaneously, you can use the clamp() function, which combines the behaviors of both min() and max().

Official Syntax

The official syntax of the min() function is as follows:

Possible Values

As indicated in the official syntax, the min() function accepts the following values:

calc-sum

A comma-separated list of mathematical calculations. These must all resolve to the same type (such as lengths, numbers, angles, or percentages). The browser evaluates all the expressions and applies the smallest resulting value.

CSS Specifications

• The min() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.