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

症状

  • PC上は問題ないが、スマホで記事を開くと、本文全体が画面右にずれてしまう
  • 文字だけの他の記事は、正常に収まる
  • 表やコードを含む記事で特に再現している

背景：2カラム構成でGridを使用

このブログでは、記事本文とサイドバーを並べるために次のようなGrid構成を使っています。

<div class="article-layout">
<article class="article-main">
…本文…
</article>
<aside class="sidebar">
…サイドバー…
</aside>
</div>

CSSは次のように定義していました。

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

これ自体はよくある2カラム構成です。
display: grid は要素をグリッドコンテナに変え、その直下の子要素を自動的に「グリッドアイテム」として扱います。
grid-template-columns: 3fr 1fr は「本文を3、サイドバーを1の比率で分ける」という意味で、fr は「残りスペースを分割する単位」です。
つまり、ブラウザは余った横幅を4等分し、左に3、右に1の割合で配分します。

gap: 20px はカラム同士の間隔です。
margin とは異なり、Gridのgapは内部の余白だけを制御できるため、カラム間の見た目をきれいに整えられます。

この構成はPCでは理想的に動きますが、スマホのように画面が狭くなると問題が起きます。
なぜなら、Gridの子要素（本文やサイドバー）がデフォルトでmin-width: autoを持つためです。
つまり、これにより「中のコンテンツを縮ませない」という意味を持ち、
内部に長いコードブロックやURLがあると、子要素の幅が固定されてしまいます。

その結果、「3fr : 1fr」のバランスが崩れ、
実際には本文カラムが親要素よりも広がり、全体が右にはみ出すことになるわけです。

DevToolsで .article-main を選択して確認してみると、
確かに min-width: auto が有効になっており、
コンテンツ幅が親要素（画面幅）を上回っていました。

なぜデフォルトで min-width:auto なのか？

ここで少し仕組みの話をします。 実はこの挙動にはちゃんとした理由があります。

CSSのレイアウトモデルでは、GridやFlexboxは「中身を壊さないことを最優先にする」という設計思想を持っています。 ブラウザは、まずコンテンツをきちんと表示できるように幅を確保しようとします。 そのため、子要素の最小幅（min-width）を自動的にautoにして、 「中のテキストやコードを無理に折り返さない」ようにしているのです。

つまり、min-width:auto はブラウザの“やさしさ”であり、 min-width:0 を書くというのは、 「この要素は折り返してもいいよ」と開発者が明示的に許可を出す操作なのです。

この仕様を理解しておくと、「なぜ min-width:0 が必要なのか？」が直感的に分かるようになると思います。

解決策：min-width: 0 を明示的に指定する

解決はシンプルです。
Gridの子要素（本文・サイドバー）に min-width: 0 を指定します。

.article-layout > *,
.article-main,
.sidebar {
  min-width: 0;
}

これで「親要素の幅に収まるように縮んでよい」と伝えることができます。
すると本文は画面幅内にきちんと収まり、折り返せない要素（コードや表）だけが横スクロール可能になります。

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

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

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

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

Flexboxでも同様の現象が起こる

調べてみたところ、この挙動は Flexboxでも同様 のようです。 Flexコンテナの子要素にもデフォルトで min-width: auto が適用されるため、
カードレイアウトやブログ一覧などで「横スクロールが出る」「要素がずれる」問題も、同じ原因で発生します。

つまり、「GridでもFlexでも、はみ出すときはまずmin-widthを疑え」というのが鉄則です。

まとめ

いつになったら、CSSちょっと分かるようになるのか、、、 今はChatGPTのようなAIに聞けばすぐ答えが返ってきますが、 昔の時代にこうした問題を自力で突き止めていたエンジニアには頭が下がります。

私が最初にPCを触ったのはWindows Vista〜7の頃。 あの頃のWebサイトがシンプルだった理由も、今なら少しわかる気がします。

小さな1行のCSSでも、レイアウト全体を救う。 そういう瞬間があるから、フロントエンドは面白いですね。