max()

Anonymous contributor's avatar
Anonymous contributor
Published Jul 12, 2021Updated Sep 3, 2021
Contribute to Docs

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>);

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);
}

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);
}

All contributors

Contribute to Docs

Learn CSS on Codecademy