I'm not sure exactly about how scrollbar width plays into it, but the Large/Small/Dynamic Viewport Units help out with this https://css-tricks.com/the-large-small-and-dynamic-viewports...

Doesn't look like they're supported by Chrome yet, but they're there in Firefox and Safari.

Those new viewport units only fix the issues with retractable chrome as commonly employed on mobile platforms. They completely ignored the scrollbars issue which has been a design bug from the very start (though there used to be a workaround—`overflow: scroll` on the body—but it was removed from the spec after only Firefox ever implemented it), which I cynically say is because it’s not an issue on mobile platforms which uniformly use overlay scrollbars.

I wouldn't say it's wrong in the examples above - I want to have the same padding on both sides, and not the padding + scrollbar gutters on one side.

There's also `scrollbar-gutter: stable` to always reserve space for the scrollbar. It's not supported in Safari, but macOS uses overlay scrollbars by default anyway so it doesn't really matter.

It’s wrong, because 100vw is the document width plus any scrollbar width (including via scrollbar-gutter). If you have a body with zero padding and a vertical scrollbar, then 100vw > 100% except on platforms with overlay scrollbars. On Windows, this is likely to mean that or a 1000px-wide body, 100vw will be 1017px.