ウェブ制作

サイト制作のちょっとしたティップスまとめ

ウェブ制作

公開日:2025/01/15

当サイトのリンクには広告が含まれています。

CSS Gridの1frでカラムがはみ出す!? 横スクロール問題をminmax()で解決

CSS Gridの1fr指定でカラムが画面外にはみ出し、横スクロールバーが表示される問題の原因と解決方法を解説。minmax()を使った対処法で、レスポンシブやウィンドウ縮小時のレイアウト崩れを防ぎます。

あれ!? いつの間にか横スクロールバーが!

テスト環境の仮データでは問題なかったはずが、本番環境のリアルデータを反映したところ、レスポンシブ対応でウィンドウを縮小した際、カラムが画面外にはみ出してしまいました。

その結果、サイト制作者の誰もが通る道、意図しない横スクロールバーが表示されてしまいました。

原因は、英文と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やメールアドレスを表記すると、遭遇する頻度は高そうです。

レスポンシブの可変時に横スクロールバーが出ちゃった人は、まずはこの点を確認してみてください。

上に戻る