複数の 100vw コンテナによって水平オーバーフローが発生するのはなぜですか?

複数の 100vw コンテナによる水平オーバーフローの問題

幅 100vw の複数のコンテナがあると、通常 100vw が考慮されている場合でも、水平オーバーフローが発生する可能性があります。全幅を表すには、 viewport.

この問題の理由の 1 つは、100vw がブラウザのツールバーやスクロールバーの幅を含む、表示されている画面全体の幅を指すことです。別の 100vw コンテナを追加すると、合計幅が表示される画面の幅を超え、水平方向のオーバーフローが発生します。

この問題を解決するには、コンテナに最大幅の制約を追加します。これにより、複数のコンテナが存在する場合でも、コンテナがビューポートの幅を超えることがなくなります:

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

max-width: 100% ルールを追加することで、各コンテナの幅を使用可能なビューポートに効果的に制限できます。幅。これにより、ビューポートの幅に基づいた動的なサイズ変更動作を維持しながら、コンテナが水平方向にオーバーフローするのを防ぎます。

この修正を適用すると、複数の 100vw コンテナを使用するときに水平方向のオーバーフローを防ぐことができ、コンテナ間で一貫性のある応答性の高いレイアウトを確保できます。ビューポート サイズが異なります。

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