CSS min() Function
Example
Use min() to set the width of #div1 to at most 300px, but smaller (50%) if the viewport width is less than 600px wide:
#div1 {
background-color: yellow;
height: 80px;
width: min(50%, 300px);
}
Try it Yourself »
Definition and Usage
The CSS min() function will use the smallest value, from a comma-separated list of
values, as the property value.
Tip: You can think of the min() function to
set a maximum value for an element.
| Version: | CSS Values and Units Module Level 4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| min() | 79 | 79 | 75 | 11.1 | 66 |
CSS Syntax
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Related Pages
CSS reference: CSS max() function.
CSS tutorial: CSS Math Functions.
