100vw causando desbordamiento horizontal, pero solo si hay más de uno?

Di que tienes esto:

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

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

Obtendrá algo que llena la pantalla, sin barras de desplazamiento. Pero agrega otro:

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

Obtiene no solo barras de desplazamiento verticales (esperado), sino un ligero desplazamiento horizontal.

Me doy cuenta de que podría omitir el ancho o establecerlo en ancho: 100%, pero tengo curiosidad por saber por qué sucede esto. ¿No se supone que 100vw es "el 100% del ancho de la ventana gráfica"?

Como ya se explicó en wf4, el desplazamiento horizontal está presente debido al desplazamiento vertical. que puedes resolver dando max-width: 100%.

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

Violín de trabajo

Las barras de desplazamiento se incluirán en el, vwpor lo que se agregará el desplazamiento horizontal para permitirle ver debajo del desplazamiento vertical.

Cuando solo tienes 1 caja, es 100% de ancho x 100% de alto. Una vez que agrega 2, su 100% de ancho x 200% de alto, por lo tanto, activa la barra de desplazamiento vertical. A medida que se activa la barra de desplazamiento vertical, se activa la barra de desplazamiento horizontal.

Podrías agregar overflow-x:hiddenabody

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/

Tuve un problema similar y se me ocurrió la siguiente solución usando variables JS y CSS.

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 es un valor de respaldo.

Actualización: a partir de la versión 66 de Chrome, ya no puedo reproducir el comportamiento informado por la pregunta. Parece que no se necesita ninguna solución alternativa.

Respuesta original

Esto es en realidad un error como se informa en esta respuesta y los comentarios anteriores.

Si bien la solución alternativa en la respuesta aceptada (agregar .box {max-width: 100%;}) generalmente funciona, me parece digno de mención que actualmente no funciona display:table(probado en Chrome). En ese caso, la única solución que encontré es usar width:100%en su lugar.

• Violín roto condisplay:table
• Trabajando violín con display:tableywidth:100%

para deshacerme del ancho de la barra de desplazamiento incluido en vw tuve que hacer esto:

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

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