あれ!? いつの間にか横スクロールバーが!
テスト環境の仮データでは問題なかったはずが、本番環境のリアルデータを反映したところ、レスポンシブ対応でウィンドウを縮小した際、カラムが画面外にはみ出してしまいました。
その結果、サイト制作者の誰もが通る道、意図しない横スクロールバーが表示されてしまいました。
原因は、英文とCSS Gridの1fr指定
今回の原因はCSS Gridの1fr
指定です。これがカラム内の英文の影響で意図せず伸びてしまいました。
この問題を解決するには、minmax()
関数を使い、最小固定サイズをしっかり定義します。
grid-template-columns: minmax(0, 1fr);
実際のコード
以下が、実際に問題が発生したコードです。
.main-container {
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
}
メインコンテナをGrid
で設定し、サイドエリアは300pxに固定。残りを1fr
と設定することで、コンテンツエリアは全体幅からサイドエリアとgap
の値を差し引いた値が自動で適用されます。
1fr
はまさにGridの真骨頂。便利すぎる。
1frの最小サイズはautoらしい
が、これがトラップだった。
1fr
ってgrid
だと気軽にホイホイ使っちゃうけど、実はこれ、最小コンテンツサイズはauto
の扱いらしいです。知らなかった。
最小サイズがauto
ということは、コンテンツの中身次第でサイズが変動するということ。
実際には、ほとんどの要素はコンテナの端で折り返す設計なので、問題が発生するケースは少ないんだけど、今回はコンテナの中にあった英文、英単語が原因でコンテナが伸びちゃいました。
ちなみにoverflow-wrap
で、予め英文の改行の手筈は整えていましたが、それでも発生します。
最小サイズを0に指定して解決
対処法として、minmax()
関数を使って、コンテナ幅の最小値に明示的に「0」を指定しました(最大値は1fr
のまま)。
これにより、ウィンドウ幅を可変させても、メインコンテナが正常に拡大縮小するようになります。
.main-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 30px;
}
まとめ
以上、CSSのGridに1fr
を指定したら、横幅が飛び出しちゃった件の対処法でした。
今回の問題は、Gridコンテナと英文の組み合わせが原因でした。多言語サイトは勿論のこと、URLやメールアドレスを表記すると、遭遇する頻度は高そうです。
レスポンシブの可変時に横スクロールバーが出ちゃった人は、まずはこの点を確認してみてください。