子要素が親要素を超えてしまう

PC ベースでスタイリングしていたデザインをモバイルで確認したところ、不要な横スクロールが発生してしまうケースがあります。

body やルートとなる要素に width: 100vw; を指定していても、なお発生する可能性があります。ここでは、代表的な 2 つのケースとその対処法を紹介します。

box-sizing を変更する

width: 100%; は、その要素の幅を親要素と同じ幅に設定します。この状態で、水平方向の padding や border を追加した場合、padding や border の分だけ親要素をはみ出してしまいます。

このような場合は、box-sizing: border-box; を指定することで解決します。border-box を指定すると、width やheight の計算方法が変化ます。 padding や border を含めた合計の要素幅がwidth や height として扱われます。