「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。
この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ) の項に記述がありました。
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 が明示的に指定されていればそのようなことは起こらない)。仕様の注意書きには以下のように書かれています。
文書中の主要な領域に flex を使うなら、min-width: 12em のように明示的に最小幅を指定したほうがよい。そうでないと巨大な表や画像があったときに内容がはみ出して読みづらくなることがある。
Note - 4.5. Implied Minimum Size of Flex Items - CSS Flexible Box Layout Module Level 1 より抄訳
ではなぜこのような仕様になっているのでしょうか? 最初はパフォーマンス上の理由かと思いましたがそうではなく (flex アイテムの内容が膨大なときには、むしろパフォーマンスに悪影響を及ぼしうる)、製作者の意図しない奇妙な表示結果を避けるためだそうです。fantasai (flexbox 仕様編集者の一人) による暗黙的な最小サイズの解説に、どんな場面でどんな挙動を想定しているかの例も載っていました。主には「複数のナビゲーション項目を flex で並べたいが、画面幅が狭くて収まりきらない場合」の救済措置を意図しているようです。
奇妙な表示結果を避けるための仕様が、ある場面では逆に制作者の意図しない「奇妙な表示結果」を生み出しているというのが面白いですね。
この記事を書くにあたって特定の CSS 仕様が導入された経緯について調べたのですが、その具体的な手順は以下の通りです。
ｺﾒﾝﾄをする