CSS scrollbar-gutter: reserve space when a panel starts scrolling

When to use it

A case list receives records while an operator is reviewing it. Before the list overflows, its rows fill the panel; after overflow, a classic scrollbar steals inline space and can make values wrap. A stable gutter avoids that late width change without forcing a scrollbar to appear when there is nothing to scroll. Apply it to the actual scrolling panel, not to every ancestor. The sample pairs an overflow limit with a stable gutter and leaves the list's height bounded by the available viewport. Test a short list, a long list, overlay scrollbars, and high zoom. The rule will not fix a layout that was too narrow before the scrollbar appeared, and it cannot guarantee identical screenshots across operating systems.

.case-list { max-block-size: min(70vh, 38rem); overflow-y: auto; scrollbar-gutter: stable; }

Cost and verification

Reserving a gutter can reduce layout shifts in classic-scrollbar environments, but it also leaves less content width while the list is short. Overlay-scrollbar systems may show no reserved space at all. The declaration is inexpensive; the real cost is a design that assumes a fixed number of columns at every width. Use flexible cell sizing and verify long IDs still wrap. If the panel is part of a dialog, keyboard focus and scrolling must remain usable. Do not hide the scrollbar to make the panel look cleaner; users need to discover that more records exist.

Common Mistakes

• Do not expect a reserved gutter with overlay scrollbars.
• Do not apply the rule to a non-scrolling ancestor and expect the panel to stabilize.
• Do not hide overflow merely to avoid a width shift.

Connected lessons

• CSS Property Decisions
• CSS overflow: contain long data without losing controls
• CSS data tables: preserve headers when columns get narrow
• CSS min and max sizes: let content grow without breaking the layout