CSS max() Function

CSS Functions

Example

Using the max() function to set the width of #div1 to the maximum value, choosing between 50% or 300px:

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

Definition and Usage

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

The max() function method accepts one or more comma-separated expressions as its arguments, and the value of the largest expression will be used as the specified property's value.

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

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

Supported Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function	Chrome	Edge	Firefox	Safari	Opera
max()	79.0	79.0	75.0	11.1	66.0

CSS Syntax

max(value1, value2, ...)

Value	Description
value1, value2, ...	Required. Comma-separated list of values to choose the maximum from.

CSS Functions

❮ Css3 Pr Order Css3 Pr Text Outline ❯