scrollbar-gutter to the rescue

As of 2026, scrollbar customization has reached a high level of cross-browser stability through standard CSS properties, specifically addressing preventing content width changes (layout shifts). Of series of #stealbackfromai Preventing Content Width Changes The most effective way to ensure a scrollbar does not change content width is the scrollbar-gutter property, which is now widely supported in modern browsers. scrollbar-gutter: stable; : This reserves space for the scrollbar even when content doesn't overflow. This prevents the "jumping" effect where content shifts left once a scrollbar appears. Integrating with Padding : When no scrollbar is present, the reserved gutter is painted as an extension of your existing padding. This allows you to define a consistent layout where the scrollbar simply "fills in" the space you've already allocated. Centering Content : You can use scrollbar-gutter: stable both-edges; to reserve space on both sides of a container, keeping centered content per