CSS min() function
Example
Use the min() function to set the width of #div1 to the smallest value, taking the minimum of 50% or 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Try it Yourself »
Definition and usage
The min() function lets you select the smallest value from a comma-separated list of expressions as the value of a property.
The min() function accepts one or more comma-separated expressions as its arguments, and the value of the expression with the smallest value will be used as the value of the specified property.
/* 属性: min(expression [, expression]) */ width: min(1vw, 4em, 80px);
In the above example, the width is at most 80px. If the viewport width is less than 800px, or the width of one em is less than 20px, it will be narrower. In other words, the maximum width is 80px,
Supported versions: CSS3
Browser Support
The numbers in the table indicate the first browser version number that supports the function.
| Function | |||||
|---|---|---|---|---|---|
| min() | 79.0 | 79.0 | 75.0 | 11.1 | 66.0 |
CSS Syntax
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A comma-separated list of values, selecting the minimum value. |
other extensions