Thank you, that is a very good example.
scrollbar-gutter: stable both;
This is what would happen with __classic__ scrollbars:
— "stable": a space would be reserved on the edge with the scrollbar
— "both": symmetrically, the same space would be reserved on the opposite edge
— except if/where a scrollbar was being displayed, that extra spacing would look just like an extension of the element's padding.
If the UA used __overlay__ scrollbars, there wouldn't be an apparent effect. If you wanted to reserve the same extra space regardless of whether classic or overlay scrollbars were being used, you would use "always" instead of "stable".
Extending your example a bit: if you wanted the content inside the (non-scrolling) footer to be aligned with that in the scrolling container above it, you would add
scrollbar-gutter: stable both force;
to the footer's style, so that same amount of space is reserved along both its edges.
I hope that was clear :) There is a visualization of several scrollbar-gutter values in the explainer
And this comment gives more detail about the "force" keyword (with images)