CSS scrollbar-gutter: both-edges Symmetrical Margins

This article explains how the CSS scrollbar-gutter: both-edges declaration preserves balanced horizontal layouts in web design. By understanding layout shifts caused by dynamic scrollbars, you will learn how reserving space on both sides of a scroll container keeps centered content aligned and prevents visual asymmetry.

The Layout Problem Caused by Scrollbars

In standard browser rendering, a vertical scrollbar appears along the inline-end edge (the right side in left-to-right languages) when content exceeds the container's height. This scrollbar consumes space from the container's content box.

When a scrollbar appears or disappears dynamically, it shifts content horizontally. More importantly, it creates visual asymmetry: even if an element has equal left and right margins or padding, the right side appears narrower because the scrollbar occupies inline space only on that single edge.

How scrollbar-gutter Addresses the Issue

The scrollbar-gutter property allows developers to reserve dedicated space (a "gutter") for the scrollbar, preventing layout shifts before the scrollbar even appears.

Using the stable keyword guarantees that space is permanently reserved for the scrollbar, even when the content does not overflow:

.container {
  scrollbar-gutter: stable;
}

While stable stops layout shifting when content grows, it still creates an asymmetrical layout because the reserved gutter exists solely on the edge where the scrollbar renders.

Maintaining Symmetry with both-edges

To restore visual balance, CSS provides the both-edges keyword, which is paired with stable:

.container {
  scrollbar-gutter: stable both-edges;
}

When both-edges is declared, the browser performs two actions simultaneously:

1. Inline-End Reservation: It reserves gutter space on the side where the vertical scrollbar naturally sits (the right side in LTR layouts).
2. Inline-Start Mirroring: It reserves an identical amount of gutter space on the opposite edge (the left side in LTR layouts), where no scrollbar will ever appear.

By mirroring the scrollbar's dimensions on the opposing edge, the container balances its usable horizontal space.

Impact on Centered and Padded Layouts

The primary benefit of scrollbar-gutter: stable both-edges is seen in horizontally centered layouts and designs with uniform padding:

• Centered Elements: Elements centered with margin-inline: auto calculate their center relative to the available content box. Without both-edges, the presence of a scrollbar shifts the mathematical center to the left. With both-edges, the center point remains identical whether a scrollbar is rendered or not.
• Uniform Margins and Padding: When visual symmetry is required across an interface—such as equal breathing room on both sides of a card or modal—both-edges prevents the scrollbar side from appearing visually compressed.

Behavior with Overlay Scrollbars

On operating systems or devices that use floating "overlay" scrollbars (such as macOS or mobile platforms), scrollbars float on top of content without consuming layout space. In these environments, the browser recognizes that the scrollbar width is zero, meaning no gutter is generated on either side. scrollbar-gutter: stable both-edges only affects layouts on platforms using traditional "classic" scrollbars that physically occupy layout width.