Stable Layouts with scrollbar-gutter

The scrollbar-gutter property reserves space for the scrollbar, preventing layout shifts when content grows.

auto: The default behavior. Layout shifts may occur when the scrollbar appears or disappears.
stable: Reserves space for the scrollbar even when not present, preventing layout shifts.
stable both-edges: Reserves space on both sides of the container for perfect symmetry.

/* Apply to the scroll container */
.scroll-container {
  scrollbar-gutter: stable;
}

Note: Scrollbars are forced to be visible in this demo to show the effect clearly on all operating systems, including macOS which uses overlay scrollbars by default.

Without scrollbar-gutter

Initial content to demonstrate the layout before scrolling is triggered. This text spans the full width of the container.

Watch the center line shift when expanded

With scrollbar-gutter: stable

Initial content to demonstrate the layout before scrolling is triggered. This text spans the full width of the container.

The center line stays stable