100vwは水平オーバーフローを引き起こしますが、複数の場合のみですか？

あなたがこれを持っているとしましょう：

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を省略したり、width：100％に設定したりできると思いますが、なぜこれが発生するのか興味があります。100vwは「ビューポート幅の100％」ではありませんか？

wf4ですでに説明したように、垂直スクロールのために水平スクロールが存在します。を与えることで解決できますmax-width: 100%。

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

ワーキングフィドル

スクロールバーが含まれるvwため、水平スクロールが追加され、垂直スクロールの下に表示されます。

ボックスが1つしかない場合は、幅100％x高さ100％になります。2を追加すると、幅100％x高さ200％になるため、垂直スクロールバーがトリガーされます。垂直スクロールバーがトリガーされると、水平スクロールバーがトリガーされます。

あなたはに追加overflow-x:hiddenすることができますbody

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/

私も同様の問題を抱えていて、JS変数と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はフォールバック値です。

更新：Chromeバージョン66以降、質問で報告された動作を再現できなくなりました。回避策は必要ないようです。

元の回答

これは、この回答と上記のコメントで報告されているように、実際にはバグです。

受け入れられた回答（追加.box {max-width: 100%;}）の回避策は一般的に機能しますが、現在は機能しないことは注目に値しますdisplay:table（Chromeでテスト済み）。その場合、私が見つけた唯一の回避策は、width:100%代わりに使用することです。

• ブロークン・フィドルとdisplay:table
• ワーキングフィドルとdisplay:tableし、width:100%

vwに含まれているスクロールバーの幅を取り除くには、これを行う必要がありました。

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

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