100vw导致水平溢出，但仅当一个以上时？

Question

说你有这个：

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

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

您会得到充满整个屏幕的内容，没有滚动条。但添加另一个：

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

您不仅可以获得垂直滚动条（预期的），还可以获得轻微的水平滚动条。

我知道您可以忽略宽度，或将其设置为width：100％，但是我很好奇为什么会这样。是不是100vw应该是“视口宽度的100％”？

Answer 1

如wf4所解释的，由于垂直滚动而存在水平滚动。您可以通过给出解决max-width: 100%。

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