【CSS】flex コンテナで overflow-wrap: break-word; を機能させる

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

https://qiita.com/punkshiraishi/items/308f0f68ae682ee8608a

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

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="QWrWjjV" data-user="punkshiraishi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/punkshiraishi/pen/QWrWjjV">
  Untitled</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 解決方法 1 : 要素の幅を指定する
オレンジの要素の幅を指定すると、オレンジの要素内の文字は改行します。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYmYpRZ" data-user="punkshiraishi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/punkshiraishi/pen/LYmYpRZ">
  flex and break-word 2</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="KKRKdNJ" data-user="punkshiraishi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/punkshiraishi/pen/KKRKdNJ">
  Untitled</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

なぜこのような挙動になるのでしょうか？
[こちらのブログ](https://nanto.asablo.jp/blog/2016/04/03/8063943) では [2016 年 4 月 2 日時点のflexbox 仕様草案](https://drafts.csswg.org/css-flexbox/#min-size-auto) を翻訳して根拠として示してくれています。

>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;` を同じ要素に適用すると、改行されなくなるので注意が必要です。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="dyeyGWj" data-user="punkshiraishi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/punkshiraishi/pen/dyeyGWj">
  break-word with flex</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考
https://qiita.com/yuji38kwmt/items/ba8d59eb0abef1956bae

https://nanto.asablo.jp/blog/2016/04/03/8063943