flexbox便利ですが、新しいプロパティなためちょいちょい詰まることがあってツラいことも…。

display: flex使ってる要素にはテキストの折り返しが効かないことがあったのでメモ。

結論から言うと、flexboxやめるか、「word-wrap: break-word」をやめて「word-break:break-all」にするか。

以下で比較してみてください。上から。

• flexboxにword-wrap: break-word
• display: table
• flexboxにword-break:break-all

一番上だけ折り返しせずにはみ出してしまっています。

See the Pen ALqQpz on CodePen.

以下の記事ではみ出す理由が詳しく解説されていました。

もう一つ参考記事