vmax
A hundredth of the longer side of the window.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 26+ |
| Chrome Android | 26+ |
| Edge | 16+ |
| Firefox | 19+ |
| Firefox Android | 19+ |
| Safari | 7+ |
| Safari iOS | 7+ |
Formula 1vmax = 1% of max(viewport width, viewport height)
How it works
1vmax is 1% of the larger side of the window. In a window 1280px wide and 800px tall, 10vmax is 128px, from the width. A square at 100vmax is never smaller than the window in either direction, which makes the unit the one for covers: backgrounds and big shapes that must reach every edge.
A circle needs more than a square. To reach the corners it must be as wide as the window’s diagonal: 118vmax in a window 1280 by 800, 125vmax at 1024 by 768, and 141.4vmax in the worst case, a square window. Centered on the window, a circle of 118vmax reached all four corners at 1280 by 800 and one of 100vmax did not, so 142vmax is the safe size for any shape.
Turning a window from 1280 by 800 to 800 by 1280 swaps vw and vh but leaves vmax at 128px per 10, so a layer sized with it keeps its size when the window turns. The same property is the hazard. A block of 100vmax is 1280px tall in the 800px window, so it scrolls the page unless a parent clips it with overflow: clip, which stopped the scrolling in the measurement.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
A background shape that must reach every edge of the window.
Watch out
A block of 100vmax is longer than the window in its shorter direction (1280px against 800px in a 1280 by 800 window), so it scrolls or overflows unless a parent clips it.
.glow {
inline-size: 150vmax;
aspect-ratio: 1;
border-radius: 50%;
}