Flexboxで横にはみ出すときの原因と直し方

Flexboxでレイアウトを組んでいると、特定のページだけ横スクロールが出てしまうことがある。
今回、私のケースでは「日本語タイトル」と「英語タイトル」を横並びに配置したときにこの問題が発生した。

この記事では、実際のHTMLとCSS、起きた不具合、そして解決策をまとめておく。

元のコード

HTML（抜粋）

<div class="page_title_wrapper">
  <div class="page_title_inner innerbox_1180">

    <div class="pege_title_main">
      <h1 class="page_title_ja">お知らせ</h1>
      <!-- パンくずリスト -->
      <nav id="breadcrumb">…</nav>
    </div>

    <div class="page_title_en">News</div>

  </div>
</div>

SCSS（問題があった部分）

.page_title_inner {
  display: flex;
  align-items: flex-start;
}

.pege_title_main {
  width: 100%;
}

.page_title_en {
  font-size: 50px;
  font-weight: 600;
  writing-mode: vertical-rl;
  flex-shrink: 0; // ← 縮まない
}

---

起きた不具合

• 普段は大丈夫なのに、一部のページだけ横スクロールが出る
• .page_title_en を削除するとスクロールがなくなる → こいつが原因っぽい
• パンくずリストが長いページで特に発生した

---

原因

• Flexboxでは、子要素の min-width がデフォルトで auto になっている
• auto だと「中身のテキストが長い場合、その長さまでは絶対に縮まない」という意味になる
• 今回は左カラム（日本語タイトル＋パンくず）が縮まらず、右カラム（英語タイトル）は flex-shrink:0 で縮まない
• 結果 → 両方縮まないので、親幅からはみ出して横スクロールが出ていた

---

解決策

左カラムに min-width:0; を追加したら一発で直った。

.pege_title_main {
  width: 100%;
  min-width: 0; // ← これで縮んでOKになる
}

これでパンくずが長くても左側が適度に縮み、右側の英語タイトルと一緒に収まるようになった。

---

まとめ

• Flexboxで子要素がはみ出すときは、min-width:0; を試す
• デフォルトの min-width:auto は「中身に合わせて絶対に縮まない」ので要注意
• 特にパンくずリストや長い単語を含む要素はこの影響を受けやすい
• 「Flexbox＋はみ出し問題」の定番の解決策がこれ

---

💡 ポイント
今回のケースに限らず、FlexboxやGridで「特定の要素だけ妙に幅を食ってはみ出す」ときは、まず min-width:0; を疑うといい。