【CSS】要素がはみ出る！そんな時はまずmin-widthを0にする

子要素が親要素をはみ出してしまうことがある。
そんなときは子要素側に以下のCSSを順番に適用するとよい

1. min-w-0
2. wrap-break-word
3. overflow 系 (ex. overflow-hidden, overflow-scroll)

phase1: flex/gridの子要素を親要素内に収める

青色要素にflexやgridを使っているとき
赤色要素に min-width: 0; が適用されると
コンテンツ幅が親要素の横幅内に収まる

なぜ min-width の指定で解決するのか：

• min-width のデフォルト値は auto である
• 通常要素における min-width: auto; は実質的に 0 扱いとなる
• ただしflexやgridの子要素では「コンテンツサイズに基づく最小幅」と解釈される
  • つまりテキスト量が多いと子要素が親要素からはみ出してしまう
    （横幅や折り返しの設定を明示的に指定していない場合）
  • 詳細: CSS Flexible Box Layout Module Level 1

phase2: テキストをコンテンツサイズ内に収める

要件に応じてテキストの表現処理を変える

• （画像左側） wrap-break-word を赤色要素に使うとテキストの折り返しが有効になる
• （画像中央） overflow-scroll を赤色要素に使うとテキストがスクロールバーで隠れる
• （画像右側） truncate をテキスト要素に使うと三点リーダで省略される

truncate を使うなら対象要素がブロックボックスでなければならない

付録

flexやgridなどの違いによって子要素の描画には微妙な違いが生じる
CodePenにてその一部を紹介する

Flexbox

See the Pen OverflowGuard - flex by hrel11 (@hrel11) on CodePen.

Grid Layout

See the Pen OverflowGuard - grid by hrel11 (@hrel11) on CodePen.

Block

See the Pen flex/grid by hrel11 (@hrel11) on CodePen.

参考

• Flexbox からコンテンツはみ出る問題を完全に解決する #HTML - Qiita
  • バニラCSSを用いた対処法が詳細に紹介されている
  • flex-direction: column; にも対応
• CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス
  • flexboxにおける min-width の挙動が図解付きで解説されている