Ever switch tabs or open a panel and watch the whole page nudge sideways by a few pixels?

That’s usually the scrollbar.

When content fits the viewport, there’s no vertical scrollbar. When it overflows, the browser adds one — and that bar eats a slice of horizontal space.

So the usable width shrinks, and everything reflows. Short view → no bar. Tall view → bar. Switch between them and the layout jitters.

Reserve space for the scrollbar even when it isn’t needed:

html {
  scrollbar-gutter: stable;
}

If your scroll container isn’t html / body — say a full-height app shell with overflow-y: auto — put it on that element instead:

.app-shell {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

That’s it. The gutter stays reserved, the scrollbar still only draws when there’s something to scroll, and the width stops jumping.

• overflow-y: scroll always shows a scrollbar track (even when empty) — looks worse.
• Padding / margin guesses break across browsers and OS scrollbar styles.
• scrollbar-gutter: stable is the intended solution: keep the lane, keep the content width.

Supported in modern Chromium, Firefox, and Safari. For most product UIs, that’s enough.

One line of CSS. A quieter UI.