css - 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 不应该是“视口(viewport)宽度的 100%”吗？

Answer 1

正如 wf4 已经解释的那样，水平滚动是由于垂直滚动而存在的。你可以通过给 max-width: 100% 来解决。

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

Working Fiddle