rdoyle720 rdoyle720 - 6 months ago 63
CSS Question

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