The scrollbar-gutter property controls whether the browser should reserve space for the scrollbar area on an element even when a scrollbar is not currently present. Its primary purpose is to eliminate or reduce layout shifts that occur when content toggles between scrollable and non-scrollable states (for example, when content is dynamically added or removed, or when window size changes). By reserving the gutter in advance, the content width and alignment remain stable, which avoids sudden reflows and prevents nearby elements from jumping horizontally when a scrollbar appears or disappears.

Beyond avoiding visual shifts, reserving scrollbar space affects how hit testing and pointer targets behave near the element edges. When the gutter is reserved inside an element’s box it reduces the space available for the element’s content and interactive children, similar to how an inner inset would. When the gutter is reserved outside the element’s box it preserves the content area while allocating space adjacent to the element. This has implications for layout and positioning: fixed or absolutely positioned descendants, sticky headers, and columns with synchronized widths will all behave more predictably when the gutter is taken into account. It also interacts with overlay-style scrollbars (which float above content) differently from classic inset scrollbars that consume layout space, so authors should consider the expected scrollbar presentation for their target platforms.

The behavior of scrollbar-gutter is applied in the context of an element’s scrolling rules and box model — in practice it’s relevant wherever scrollbars may appear, so it’s important to understand how it works with the element’s overflow handling and spacing. For example, the appearance of scrollbars is controlled by overflow, and reserving a gutter will change the effective area available for content in a way similar to adding internal spacing via padding. Because it changes layout metrics, using gutter reservation can simplify responsive designs and animations by preventing unexpected reflows, improving perceived performance and reducing visual jitter when content or viewport size changes.