Flexのカードが長い文字ではみ出す？min-widthと折り返しを分けて確認しよう

カードの中に長いURLや空白のない文字列が入ったとき、横並びのレイアウトだけが画面からはみ出すことがあるよ。widthを小さくしても直らないなら、Flexアイテムの最小幅と、文字の折り返しを分けて確認してみよう。

この記事では、アイコンと本文を横に置いた小さな作例で、箱を縮めることと、中の文字を折り返すことの違いを確かめる。ブラウザがあれば試せるよ。作例の長い文字列は架空の文字で、外部サイトへ通信しない。

Flexアイテムには「ここより縮めない」がある

Flexboxは、子要素を横や縦に並べてサイズを調整するCSSの仕組み。横方向へ並ぶ要素では、min-widthという最小幅の設定も関係する。

min-widthの公式リファレンスが説明するように、Flexアイテムの初期値autoは、内容の最小幅などを基準にする。長い一続きの文字があると、その内容が縮みにくい原因になる場合があるんだ。autoがいつも同じ幅になるわけではなく、スクロールコンテナーなどの条件でも扱いが変わるよ。

今回の作例では、外側のカードがdisplay:flexで、その直接の子にアイコンと本文がある。min-width:0は、問題を起こしている直接のFlexアイテムである本文の箱へ指定する。

.card {
  display: flex;
  gap: 12px;
}

.card__icon {
  flex: 0 0 40px;
}

.card__body {
  flex: 1 1 auto;
  min-width: 0;
}

最小幅を0にするのは、文字サイズを0にすることではないよ。レイアウト計算で、その箱を内容の幅より小さくできるようにする指定だよ。

箱が収まっても、文字が飛び出すことはある

箱の幅を縮めても、中の長い文字列が折り返せるとは限らない。文字側には、別に次の指定を試す。

.card__body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

overflow-wrap:anywhereは、長くて通常の区切りでは収まらない文字列を、必要なら途中で折り返せるようにする指定。単語の途中で改行できるようになり、表示する文字列そのものを削除するわけではないよ。

この指定で生まれる改行の可能性は、内容の最小幅の計算にも使われる。そのため、条件によってはanywhereだけでautoの最小幅も小さくできる。必ず両方の指定が必要だという意味ではなく、今回の作例では二つの役割を段階的に切り分けているんだ。

作例で三つの状態を比べよう

下の「動かしてみよう」で設定を切り替えてね。比較枠の内側だけを横にスクロールできるので、ページ全体が壊れることはないよ。

1. 初期状態：本文の箱が長い文字に引っ張られ、カードの幅より大きくなる。
2. 箱だけ縮める：本文の箱は収まるけれど、長い文字は外へはみ出す。
3. 箱と文字を収める：箱を縮め、文字も複数行へ折り返す。
4. 「初期状態に戻す」で、最初の比較へ戻る。

測定欄には、カード内側の幅・本文の箱の幅・本文の横スクロール幅を出す。小数の丸めやブラウザによる差があるので、特定のピクセル数を暗記するより、箱の幅が変わったか、文字のはみ出しが残っているかを見てみよう。

直らないときは、指定する場所をたどる

同じ指定を何度も足す前に、次を確認しよう。

コード表示や表など、横スクロールで読むほうがよい内容もある。どんな内容にも無条件で改行を増やすのではなく、コンテンツに合わせて折り返しとスクロールを選ぼう。

ほかの幅の問題とは分けて考える

幅にpaddingやborderを含める計算は、box-sizingの作例で確認できる。今回の最小幅とは別の観点なので、box-sizing:border-boxだけで、Flexの内容による最小幅の問題が必ず直るわけではないよ。

仕様はoverflow-wrapのリファレンスも確認しよう。作例は横方向のFlexboxと一続きの文字を扱うもの。縦方向・異なる書字方向・テーブルの挙動を同じ結果として説明するものではないよ。