CSS units · 1% of min(vw, vh)
vmin and vmax
vmin is 1% of the smaller viewport side; vmax is 1% of the larger side.
Key facts
| vmin | 1% of min(vw, vh) |
|---|---|
| vmax | 1% of max(vw, vh) |
| Use | Square or proportional elements |
| Changes | With orientation and resize |
| Standard | CSS Values and Units Level 4 |
The smaller or larger side
vmin follows whichever viewport dimension is smaller. On a portrait phone that is the width; on a landscape monitor it is the height. A square sized with 50vmin always fits inside the viewport regardless of orientation.
vmax follows the larger dimension. It is less common because it can overflow the shorter axis, but it is useful when the design should scale with the dominant dimension.
Practical use
Use vmin for badges, logos and decorative shapes that must stay proportional. Combine it with a maximum in pixels so the element does not become enormous on a large display: min(40vmin, 320px).
Like the other viewport units, vmin changes on resize and orientation change. Animate with care, and test with browser chrome expanded and collapsed.
Frequently asked questions
What is the difference between vmin and vmax?
vmin uses the smaller of width and height; vmax uses the larger.
Can vmin cause overflow?
A single vmin dimension fits, but combining it with other lengths can still overflow. Use min() or max() to bound it.