scrollbar-gutter

scrollbar-gutter reserves space for classic scrollbars so content width need not change when overflow appears. It is not an arbitrary gap between a scrollbar and the container edge.

Toggle overflow without changing a classic gutter

Stable reserves the classic-scrollbar gutter even before the extra notes are shown. Overlay-scrollbar platforms do not reserve a gutter, so the difference may be invisible there.

<button
  type="button"
  onclick="document.getElementById('extra').hidden = !document.getElementById('extra').hidden"
>
  Toggle extra notes
</button>
<div
  class="viewport"
  tabindex="0"
  role="region"
  aria-label="Stable gutter practice"
>
  <p>Short note.</p>
  <div id="extra" hidden>
    <p>First practice note.</p>
    <p>Read the example source.</p>
    <p>Change one value.</p>
    <p>Observe the result.</p>
    <p>Check narrow layouts.</p>
    <p>Compare with the original.</p>
    <p>Last practice note.</p>
  </div>
</div>

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.viewport {
  scrollbar-gutter: stable;
}
button {
  font: inherit;
  padding: 0.75rem;
  margin-block: 0.5rem;
}

Reserve matching space on both inline edges

Stable both-edges adds a matching gutter opposite a present inline-edge gutter. It can keep centered content visually balanced with classic scrollbars.

<div
  class="viewport"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.viewport {
  scrollbar-gutter: stable both-edges;
  text-align: center;
}

Values and defaults

The initial value is auto and the property is not inherited. Auto uses gutters when classic overflow needs them. Stable reserves the gutter with overflow:auto, scroll, or hidden even without overflow; it does not create one for overlay scrollbars. Both-edges combines with stable and mirrors a present inline-edge gutter. Always is not a valid current value.

Common mistakes

You cannot request a pixel gutter width here. An overlay scrollbar paints over content and does not consume a classic gutter. Stable does not enable scrolling, and a box using overflow:visible/clip does not get the same reservation. Test the OS scrollbar setting as well as browser support before calling an apparently unchanged demo broken.

Learn scrollbar-width, overflow, and box-sizing.

Sources and browser support

MDN: scrollbar-gutter describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.