CSS max()

Sets the largest value from a list of one or more comma-separated expressions as the value for a CSS property.

Syntax

<property>: max(<expression>, <expression>);

Copy to clipboard
Copy to clipboard

where <expression> can be one of the following:

• Length values: 10px
• Relative length values: 40vh
• Nested math function values: min(20vw, 200px)
• Math expressions using arithmetic operators: 40vw - 20px

Example 1

Set the width of the .box-max to whichever value is greater, 50vw or 700px:

.box-max {
  background-color: blue;
  height: 100px;
  width: max(50vw, 700px);
}

Copy to clipboard
Copy to clipboard

Example 2

Set the height of the .box-max to whichever value is greater, 40vh or 600px:

.box-max {
  background-color: blue;
  width: 500px;
  height: max(40vh, 600px);
}

Copy to clipboard
Copy to clipboard