CSS max() Function

The max() function lets you select the largest (most positive) value from a list of comma-separated expressions.

At first glance, the name of this function can be a little counter-intuitive. Because it always picks the largest value, you actually use max() to set a minimum boundary for an element.

For example, imagine you want a container to take up 50% of the screen, but you never want it to shrink below 300 pixels on small devices. You would write width: max(50%, 300px). The browser looks at both values. If 50% of the screen is 500px, it chooses 50% (because 500px is larger than 300px). But if the screen shrinks and 50% becomes only 200px, the browser chooses 300px (because 300px is now the larger value).

This makes max() a fantastic tool for responsive design, allowing you to build fluid layouts without relying on media queries or the traditional min-width property.

Here's an example of a responsive box using max(). Try resizing your browser window to see how it shrinks, but eventually stops shrinking once it hits its 400px floor:

View Output Full Screen Preview

How It Works

The max() function accepts one or more comma-separated calculations. You can mix and match different units, which can be very handy. So comparing a percentage to a pixel value or a viewport unit (like vw) is perfectly valid.

Just like the calc() function, max() evaluates mathematical expressions automatically. You can write equations directly inside the arguments, such as max(50vw - 20px, 300px).

If you want to set both a minimum and a maximum boundary at the same time, you can nest min() and max() together, or simply use the clamp() function, which was designed specifically for that purpose.

Official Syntax

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

Possible Values

As indicated in the official syntax, the max() 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 largest resulting value.

CSS Specifications

The max() 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.