min()
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);}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.