100vw を使用すると複数の要素で水平オーバーフローが発生するのはなぜですか?

100vw によって引き起こされる水平オーバーフローについて

100vw を使用して要素の幅を定義する場合、そのような要素が複数存在すると、開発者は予期しない水平オーバーフローが発生する可能性があります。 100vw は「ビューポート幅の 100%」を示すことを目的としていますが、特定のシナリオではこの動作が発生する可能性があります。

次のコードを検討してください。

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

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

このコードは、単一のスクロールバーなしで画面全体を埋める要素。ただし、2 番目の要素が追加された場合:

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

その結果、(予想どおり) 垂直スクロールバーだけでなく、わずかな水平スクロールも発生します。なぜこのようなことが起こるのでしょうか?

その理由は、垂直スクロールバーの存在にあります。 div 要素の内容が高さを超えると、垂直スクロールバーが表示されます。これにより、要素に使用できる水平方向のスペースが減少し、要素が水平方向にオーバーフローします。

この問題を解決するには、max-width: 100%; を追加します。ボックス クラスへ:

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

要素の最大幅を 100% に制限することで、垂直スクロールバーが存在する場合でも水平オーバーフローが防止されます。

以上が100vw を使用すると複数の要素で水平オーバーフローが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。