Why is my vmax element overflowing?

vmax follows the larger viewport axis, so on a narrow screen it can exceed the smaller dimension. Use vmin or clamp() to contain it.

When is vmax better than vw or vh?

When you want an element to scale with whichever axis is biggest regardless of orientation—common for full-bleed decorative layers.

Is vmax to px converter free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Can I copy the generated CSS output?

Yes. Each tool provides copy-ready snippets so you can paste values directly into code.

Converter · CSS unit tool

VMAX to PX converter

px = (vmax ÷ 100) × max(viewportWidth, viewportHeight). vmax tracks the *larger* viewport axis, so elements scale up aggressively on whichever dimension dominates.

Viewport width

Viewport height

VMAX

vmax

Result

512.00 px

40vmax × 1280px ÷ 100 = 512.00px

max axis = 1280px

Keyboard tip: press Tab or Shift+Tab to switch fields.

The VMAX to PX formula

Take 1% of whichever viewport axis is larger, then multiply by your vmax value: px = (vmax ÷ 100) × max(width, height). On a 1200×800 window, 10vmax = 120px because width is the larger axis.

Because it follows the bigger axis, vmax produces noticeably larger values than vmin at the same number—plan around that when sizing.

When to reach for vmax

vmax suits background flourishes and oversized decorative type that should fill the dominant dimension on wide desktops or tall portrait screens.

Avoid it for anything that must stay fully visible—because it follows the larger axis, vmax elements can easily overflow the smaller one.

Copy-ready examples

Dominant decorative blob

css

.blob {
  width: 60vmax;
  filter: blur(80px);
}

Frequently asked questions

Why is my vmax element overflowing?: vmax follows the larger viewport axis, so on a narrow screen it can exceed the smaller dimension. Use vmin or clamp() to contain it.
When is vmax better than vw or vh?: When you want an element to scale with whichever axis is biggest regardless of orientation—common for full-bleed decorative layers.
Is vmax to px converter free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.
Can I copy the generated CSS output?: Yes. Each tool provides copy-ready snippets so you can paste values directly into code.