Flexboxレイアウトで文字列が折り返さない場合の解決方法
Flexboxを使用してレイアウトした際、flex-basis: auto;
の中にある文字列の自動改行が効きません。
以下は現象とその解決方法になります。
下記はFlexboxを使用したサンプルとその表示になります。

この時点では正常に表示されています。ここで、86行目と91行目(下記では94行目)の内容を以下のように変更してみます。

折り返して欲しい文字列が折り返されず、BOXの幅が広がってしまいました。
解決方法
flex-basisを指定しない
flex: 1 0 auto;
をflex: 1;
とする。
Chromeなどはこれで回避可能ですが、IEで想定した表示にならないケースが出てくるかもしれません。
widthを指定する

55行目だけでもChormeやEdgeでは対応できるのですが、IE11で高さがおかしなことにことになります。そのため47行目を追加しています。