Flexboxレイアウトで文字列が折り返さない場合の対処方法

      2017/03/03

Flexboxを使用してレイアウトした際、flex-basis: auto;の中にある文字列の自動改行が効きません。
その場合の対処方法です。

下記はFlexboxを使用したサンプルとその表示になります。

Flexbox1

この時点では正常に表示されています。ここで、87行目と92行目の内容を以下の様に変更してみます。

Flexbox2

折り返して欲しい文字列が折り返されず、BOXの幅が広がってしまいました。

回避方法

flex-basisを指定しない

flex: 1 0 auto;flex: 1;とする。
Chromeなどはこれで回避可能ですが、IEで想定した表示にならないケースが出てくるかもしれません。

widthを指定する

Flexbox3

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

 - CSS