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

Say you have this:

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

<div class="box">Screen 1</div>

You'll get something that fills the screen, no scrollbars. But add another:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

You get not only vertical scrollbars (expected), but a slight horizontal scroll.

I realize you could omit the width, or set it to width: 100%, but I'm curious why this is happening. Isn't 100vw supposed to be "100% of the viewport width"?

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

scrollbars will be included in the vw so the horizontal scroll will be added to allow you to see under the vertical scroll.

When you only have 1 box, it is 100% wide x 100% tall. Once you add 2, its 100% wide x 200% tall, therefore triggering the vertical scrollbar. As the vertical scrollbar is triggered, that then triggers the horizontal scrollbar.

You could add overflow-x:hidden to body

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

I had a similar problem and came up with the following solution using JS and CSS variables.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc(var(--vw, 1vw) * 100);

1vw is a fallback value.

If you're working in a framework (ASP.NET for example) where there's possibly a parent element wrapping around the html, then setting the html's max-width to 100% will solve the problem without using the "band-aid" solution overflow-x: hidden.

html {
   max-width: 100%;
}

The reason why 100vw is causing a horizontal scrollbar is well explained in other responses: 100vw counts the width of the vertical scrollbar to the html itself. I think this is a little absurd, but it is what it is, you know :)

Update: As of Chrome version 66, I cannot reproduce the behaviour reported by question anymore. No workaround appears to be needed.

---

Original Answer

This is actually a bug as reported in this answer and the comments above.

While the workaround in the accepted answer (adding .box {max-width: 100%;}) generally works, I find it noteworthy that it does not currently work for display:table (tested in Chrome). In that case, the only workaround I found is to use width:100% instead.

• Broken Fiddle with display:table
• Working Fiddle with display:table and width:100%

to get rid of the scrollbar width included in vw i had to do this:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;/*add This*/ 
}
/*and enjoy ^_^ */