100vw causing horizontal overflow, but only if more than one?

Question

Say you have this:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

Screen 1

You

Answer 1

As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Working Fiddle