Prevent 100vw from creating horizontal scroll

Question

If an element is set to width: 100vw; and there is a vertical scrollbar the width of the element will be equal to the viewport plus the width of the scrollbar.<

Answer 1

Here's my solution to the problem of 100vw adding a horizontal scroll:

html {
width: calc(100% + calc(100vw - 100%));
overflow-x: hidden;
}

.box {
width: calc(100% + calc(100vw - 100%));
}