Flexboxを使っていて、なんだかテキストの省略が効かないなと思うことが有りました。 調べると対策が分かったのですが、Qiitaには記事が無さそうだったので、まとめてみました。 問題が発生する条件 Flexbox内で、サイズ指定の無い親要素の中で文字省略しようとしてもできない。 (親要素のサイズを指定すれば文字省略されます) See the Pen OZRLaj by teppei (@peitetsu) on CodePen. よく有るパターン Flexbox内で、一部要素をサイズ固定にし、残りを flex: 1 とする場合も省略されない。 See the Pen VxKZwJ by teppei (@peitetsu) on CodePen. 解決策 親要素に overflow: hiddenもしくは min-width: 0を指定すると解決するようです。 個人的には oveflow