min()

christian.dinh's avatar
Published Jul 12, 2021Updated Sep 3, 2021
Contribute to Docs

Sets the smallest 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 less, 50vw or 700px:

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

Example 2

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

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

All contributors

Contribute to Docs

Learn CSS on Codecademy