Avoid content layout shifts when moving from content without a scroll to content with a scroll. MDN Spec
CSS
html {
scrollbar-gutter: stable both-edges;
}Demo
The two containers hold identical text. The first reserves the scrollbar’s gutter, so the content does not shift when the scrollbar appears; the second does not, so it does.
With scrollbar-gutter
This container has scrollbar-gutter: stable applied.
When content exceeds the container height, a scrollbar appears without shifting the content.
Without scrollbar-gutter
This container does not have scrollbar-gutter applied.
When content exceeds the container height, a scrollbar appears and shifts the content.