はじめに

下記の記事での検証の結果、文字列をはみ出さずに改行させるためには、overflow-wrap: break-word; が良さそうだ、ということがわかりました。

しかし、flex の文脈の中ではこの方法では解決しないケースがありました。

困ったこと

flex の要素内で、固定値の幅を持った緑の要素と、そうでないオレンジの要素を並べます。
オレンジの要素は overflow-wrap: break-word; が指定されているにも関わらず、改行されませんでした。

See the Pen Untitled by shiraishi yuma (@punkshiraishi) on CodePen.

解決方法 1 : 要素の幅を指定する

オレンジの要素の幅を指定すると、オレンジの要素内の文字は改行します。

See the Pen flex and break-word 2 by shiraishi yuma (@punkshiraishi) on CodePen.

しかしこの方法は、事前に幅が計算できるときにしか適用できません。
flex 文脈下で、残りの幅を全部使いたい時などには適していません。

解決方法 2: `min-width` を設定する

オレンジの最小幅を指定すると、オレンジの要素内の文字は改行します。
下記の例では min-widht: 0; を指定していますが、それ以外の値でもOKです。

See the Pen Untitled by shiraishi yuma (@punkshiraishi) on CodePen.

なぜこのような挙動になるのでしょうか？
こちらのブログでは 2016 年 4 月 2 日時点のflexbox 仕様草案を翻訳して根拠として示してくれています。

flex アイテム (display: flex または display: inline-flex を指定した要素の子要素) の最小幅 (flex アイテムが水平方向に並ぶ場合) は、(min-width プロパティで明示的に指定していなければ) flex アイテムの内容の最小幅または flex アイテムに width プロパティで明示的に指定された幅などのうち、最も小さいものになる (flex アイテムの幅がそれ以上縮むことはない) そうです。

ここで「内容の最小幅」を算出するときには word-wrap: break-word の影響を考慮できません (break-word は行ボックスの幅からあふれる単語に影響を与えるが、最小幅を算出しようという段階では行ボックスの幅も定まっていない)。なので、width も min-width も明示的に指定していない flex アイテムの内容に長い英単語があると、その単語の幅まで flex アイテムの幅が拡張されるということのようです (そして min-width が明示的に指定されていればそのようなことは起こらない)。

一般的な CSS の原則とは異なる奇妙な挙動なので、「そういう仕様なんだな」くらいに思っていたほうが良さそうです。

注意: break-word は flex と併用不可

overflow-wrap: break-word; と display: flex; を同じ要素に適用すると、改行されなくなるので注意が必要です。

See the Pen break-word with flex by shiraishi yuma (@punkshiraishi) on CodePen.

参考