Why `100vw` Can Create Horizontal Scrolling

.full-band {
  width: 100vw;
}

.full-band {
  width: 100%;
}

Root cause

Viewport units are resolved against a viewport, while percentage inline sizes are resolved against a containing block. Those boundaries happen to coincide in simple layouts, but they are not interchangeable once a child begins after a page gutter or inside another constrained wrapper.

The failing fixture deliberately places a 100vw band inside a padded shell. The band begins 16 CSS pixels from the left edge and then remains one full viewport wide, so the document needs additional horizontal space.

Diagnose the actual boundary

Start by comparing document.documentElement.scrollWidth with clientWidth, then inspect the target’s getBoundingClientRect(). In this fixture the useful signal is not the declaration alone: the band has a positive left offset and its right edge lands beyond the document’s visible inline edge. Inspect the parent at the same time. If the parent’s content box is the intended boundary, a percentage or inline-size: 100% expresses that relationship directly.

Temporarily hiding horizontal overflow can make the scrollbar disappear while leaving controls, focus rings, or text outside the reachable area. The regression therefore measures geometry and confirms that the complete band remains visible; it does not treat overflow-x: hidden on the page as a repair.

When this fix is not enough

Use 100vw when the viewport really is the intended sizing boundary. A full-bleed section may instead need a deliberate breakout pattern that accounts for its offset. If changing the width does not remove the overflow, inspect transforms, fixed media, negative margins, and descendants with large intrinsic sizes.

Regression condition

At each tested viewport, the failing document should report positive page-level overflow and the fixed document should report zero page-level overflow. The target element remains visible in both states.