100vw causando estouro horizontal, mas somente se mais de um?

Diga que você tem isso:

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

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

Você verá algo que preenche a tela, sem barras de rolagem. Mas adicione outro:

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

Você obtém não apenas barras de rolagem verticais (esperado), mas uma leve rolagem horizontal.

Sei que você pode omitir a largura ou defini-la como largura: 100%, mas estou curioso para saber por que isso está acontecendo. 100vw não deveria ser "100% da largura da janela de visualização"?

Como já explicado por wf4, a rolagem horizontal está presente por causa da rolagem vertical. que você pode resolver dando max-width: 100%.

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

Trabalho violino

barras de rolagem serão incluídas no vwpara que a rolagem horizontal seja adicionada para permitir que você veja abaixo da rolagem vertical.

Quando você tem apenas 1 caixa, ela tem 100% de largura x 100% de altura. Depois de adicionar 2, é 100% largo x 200% alto, acionando a barra de rolagem vertical. Conforme a barra de rolagem vertical é acionada, isso aciona a barra de rolagem horizontal.

Você pode adicionar 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/

Eu tive um problema semelhante e vim com a seguinte solução usando variáveis ​​JS e 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 é um valor substituto.

Atualização: a partir da versão 66 do Chrome, não consigo mais reproduzir o comportamento relatado por pergunta. Nenhuma solução alternativa parece ser necessária.

Resposta Original

Na verdade, este é um bug conforme relatado nesta resposta e nos comentários acima.

Embora a solução alternativa na resposta aceita (adição .box {max-width: 100%;}) geralmente funcione, acho digno de nota que ela não funciona atualmente para display:table(testado no Chrome). Nesse caso, a única solução alternativa que encontrei é usar width:100%.

• Violino quebrado comdisplay:table
• Trabalhando violino com display:tableewidth:100%

para me livrar da largura da barra de rolagem incluída no vw, tive que fazer isso:

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

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