100vw causing horizontal overflow, but only if more than one?

Question

Say you have this:

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

Screen 1

You

Answer 1

Update: As of Chrome version 66, I cannot reproduce the behaviour reported by question anymore. No workaround appears to be needed.

---

Original Answer

This is actually a bug as reported in this answer and the comments above.

While the workaround in the accepted answer (adding .box {max-width: 100%;}) generally works, I find it noteworthy that it does not currently work for display:table (tested in Chrome). In that case, the only workaround I found is to use width:100% instead.

• Broken Fiddle with display:table
• Working Fiddle with display:table and width:100%