min()
The min() function resolves to the smallest of one or more comma-separated values.
Syntax
min(<value>, <value>...)Examples
.container {
width: min(100% - 2rem, 1100px);
margin-inline: auto;
}
Output
The container is 1100px wide on large screens but shrinks to the viewport width minus gutters on small screens.
Notes
min() effectively acts as a maximum cap (it picks the smaller, so it never exceeds the smallest bound). Arguments may mix units and include calc-style expressions. Common for responsive max-width without a media query.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 79 |
| firefox | 75 |
| safari | 11.1 |
| edge | 79 |