min()
Takes the smallest of the values — a way to set an upper limit.
Syntax
min(value, value, …)Parameters
| Parameter | Type | Description |
|---|---|---|
| values | length | Two or more values separated by commas, units may differ. |
Examples
A column that does not exceed 300px or the parent's width:
<div style="width: min(100%, 300px); margin: 0 auto; padding: 8px; background: lavender;">
300px wide, but never wider than the screen
</div>Notes
width: min(100%, 300px) does the same as width: 100%; max-width: 300px in one line. It may feel backwards: min() sets the maximum.
See also
In the tutorial
- CSS functions — Calculations right in CSS — calc(), min(), max() and clamp(), mixing units, fluid sizes and functions together with variables.