CSS max() function

CSS Functions

Example

Use the max() function to set the width of #div1 to the largest value, taking the maximum of 50% or 300px:

#div1 { background-color: yellow; height: 100px; width: max(50%, 300px); }

Try it Yourself »

Definition and usage

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

The max() function method accepts one or more comma-separated expressions as its parameters, and the value of the expression with the largest numeric value is used as the value of the specified property.

/* 属性: max(expression [, expression]) */
width: max(10vw, 4em, 80px);

In the example above, the width will be at least 80px, unless the viewport width is greater than 800px or an em is wider than 20px. Simply put, the minimum width is 80px. You can also think of the value of max() as providing a minimum possible value for a property.

Supported versions: CSS3


Browser Support

The numbers in the table indicate the first browser version number that supports this function.

Function
max() 79.0 79.0 75.0 11.1 66.0

CSS Syntax

max(value1, value2, ...)
Value Description
value1, value2, ... Required. A comma-separated list of values from which the maximum is selected.

CSS Functions

other extensions