This method offers a comprehensive solution to the persistent bug that still affects modern browsers. Using overflow-x: hidden may not always be ideal and can present issues in various scenarios.

To see a complete example, visit this link: http://codepen.io/bassplayer7/pen/egZKpm

I tackled the issue by calculating the width of the scroll bar and adjusting the 100vw using calc(). This approach became more intricate as I needed to consider the content width extracted from a specifically sized box and factor in margins as well.

A noteworthy observation about the code below is that the assumed 20px for scroll bars might not be universally applicable. To address this, I employed SCSS variable (although not mandatory) and included fallback code outside of @supports.

Furthermore, it's important to note that while this method doesn't completely eliminate scroll bars, as it relies on Javascript, users without Javascript enabled will still encounter horizontal scroll bars. One workaround could involve initially setting overflow-x: hidden and then overriding it with a class once Javascript executes.

Complete SCSS Code:

$scroll-bar: 20px;

:root {
    --scroll-bar: 8px;
}

.screen-width {
  width: 100vw;
  margin: 0 calc(-50vw + 50%);

    .has-scrollbar & {
        width: calc(100vw - #{$scroll-bar});
        margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
    }

    @supports (color: var(--scroll-bar)) {
        .has-scrollbar & {
            width: calc(100vw - var(--scroll-bar));
            margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
        }
    }
}

To convert the above code into plain CSS, simply replace all instances of #{$scroll-bar} with the pixel value

Then use this JavaScript to set the CSS Custom Property:

function handleWindow() {
    var body = document.querySelector('body');

    if (window.innerWidth > body.clientWidth + 5) {
        body.classList.add('has-scrollbar');
        body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
    } else {
        body.classList.remove('has-scrollbar');
    }
}

handleWindow();

On a side note, Mac users can test this by navigating to System Preferences -> General -> Show Scroll Bars = Always

After experimenting with the max-width attribute paired with width:100vw, I was able to successfully resolve my issue.

Take a look at the code snippet below which did the trick for me.

.full{
     height: 100vh;
     width: 100vw;
     max-width: 100%;
    }

This approach essentially sets the maximum width of the element to match the viewport width, preventing any horizontal scrolling issues.

For more information on this technique, visit https://www.w3schools.com/cssref/pr_dim_max-width.asp

The max-width property specifies the maximum width that an element can have.

If the content within the element exceeds this maximum width, it will adjust the height accordingly.

If the content is smaller than the defined maximum width, the max-width property won't have any impact.

When working with paddings, borders, and margins, there can be interference in the layout. To ensure accurate width calculations that include these attributes, consider using box-sizing. It may also be necessary to exclude margin from the width calculation.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0; /* interferes with 100vw */
}
.parent {
    width: 100vw;
    max-width: 100%; /* see below */
}
.box {
    width: 100%; /* For older browsers without vw or calc() support */
    width: -webkit-calc(100vw - [your horizontal margin, if any]);
    width: -moz-calc(100vw - [your horizontal margin, if any]);
    width: calc(100vw - [your horizontal margin, if any]);
    max-width: 100%
}

If a scrollbar appears due to reflow after the initial viewport width calculation, adding max-width: 100%; may be necessary. This issue is more common in browsers with interfering scrollbars, such as iOS, OS X, and IE 11 Metro.

I faced a similar challenge and initially thought of using CSS variables as the solution. However, since CSS variables are not supported in IE11, I had to come up with a different approach:

To resolve this issue, I calculated the width of the scrollbar by subtracting the width of the body (excluding the scrollbar) from the width of the window (including the scrollbar). I then used this calculation to adjust the body's width by adding it to 100%, as shown in the plusScrollBar variable.

Here is the JavaScript code snippet:

// calculate width of scrollbar and add it as inline-style to the body
var checkScrollBars = function() {
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    normalw = window.innerWidth;
    scrollw = normalw - b.width();

    var plusScrollBar = 'calc(' + '100% + ' + scrollw + 'px)'
    document.querySelector('body').style.minWidth = plusScrollBar;
}();

And here is the corresponding CSS:

html{
    overflow-x: hidden;
}

What I appreciate about this solution: it acknowledges that not all scrollbars have the same width or are considered as consistent additional space. :)

After encountering the same issue, I found a solution by including the following CSS:

html, body { overflow-y: auto; }

I also left a note explaining the fix:

/* This code resolves a 100vw problem by eliminating unnecessary horizontal scrollbars */

This approach seems to work effectively on Firefox, Chrome, Opera, and even Internet Explorer 11 (tested using browserling).

Although the exact reason behind its success is unclear, it effectively dealt with the issue at hand.

UPDATE: While the horizontal scrollbar did vanish, I noticed that it remained scrollable horizontally through cursor keys and touch screen gestures...

Using overflow-x: clip; will get the desired result.