One example of working around the '100vw includes scrollbar width' issue

example.js

const width = window.innerWidth - document.documentElement.clientWidth;
const root = document.documentElement;
root.style.setProperty('--scrollbar-width', `${width}px`);

example.scss

// This will prevent scrollbar issues fine for most cases.
body {
  overflow-x: hidden;
}

// But you might find some cases where the above is not enough, for example…
--grid-gutter-width: calc((100vw - var(--container-max-width)) / 2);
//… will give incorrect results if a scrollbar is visible as the scrollbar width will be included in 100vw.

// To get around this issue, we can do something like this:
// For mobile-first, set this to 0, otherwise you could use 17px as that seems a common
// desktop scrollbar width (https://codepen.io/sambible/post/browser-scrollbar-widths).
--scrollbar-width: 0;
// Now we use calc and a custom property to subtract the scrollbar width from 100vw before we use its value:
--grid-gutter-width: calc(((100vw - var(--scrollbar-width)) - var(--container-max-width)) / 2);