最近、ブログの記事ページをスマホで確認したところ、本文全体が画面の右にはみ出す現象に遭遇しました。
コードブロックや表を含む記事だけに発生していて、他の記事は問題なし。
「テーブルが悪いのか？」「コードブロックか？」と原因を探っていくと、実は Grid レイアウト特有の挙動 が原因でした。

症状

  • スマホで記事を開くと、本文全体が画面右にずれてしまう
  • 横スクロールしてもコードや表が最後まで見れない
  • 他の記事（画像だけの記事など）は正常に収まる

原因：Grid子要素の min-width: auto

記事ページは以下のように Grid レイアウト を使っていました。

.article-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

一見普通の2カラムレイアウトですが、ここで CSS Grid の落とし穴 が発動します。 Grid や Flexbox の子要素には、デフォルトで min-width: auto が効いています。

これが曲者で、「子要素の中に折り返せないコンテンツ（例：コードブロック、長いURL、表など）」があると、 子要素は その幅を優先して縮まらない → その結果、Grid 全体が親幅を超えてはみ出す という現象が起こります。

解決策：min-width: 0 を指定する はみ出しを防ぐためには、Grid の子要素に min-width: 0 を指定して「親幅に収まるよう縮んでよい」と教えてあげる必要があります。

.article-layout > *,
.article-main,
.sidebar {
  min-width: 0; /* ←これがポイント */
}

こうすると、本文はちゃんと画面幅に収まります。 折り返せない要素（コードや表）は、その要素だけが横スクロール可能になり、全体ははみ出さなくなります。

修正前（はみ出してしまう）

スマホ画面幅
本文が広がる → 横スクロール不可

修正後（本文は収まる、コードや表だけ横スクロール）

スマホ画面幅
本文本文本文
┌───────────────┐
コードや表 ← 横スクロールOK
└───────────────┘

まとめ

  • Grid / Flexbox の子要素はデフォルトで min-width: auto
  • 折り返せない要素があると 親より広がってしまう
  • 子要素に min-width: 0 を指定すれば、本文全体は収まり、はみ出し解消

🎯 今回の学び

「Grid や Flexbox でレイアウトしていて本文やカードがはみ出す」ときは、まず min-width: 0 を疑え！

これは CSS レイアウトでかなり多くの人がハマるポイントなので、同じように悩んでいる人の参考になれば嬉しいです。