flexboxの子要素がはみ出して縮まない

これはflexboxの仕様上、子要素のmin-widthのデフォルト値がautoになっていることが原因であるケースがほとんどです。flex-shrinkを指定していても、子要素の内容（特に改行されない長いテキストや画像）が「最小コンテンツサイズ」として扱われ、その幅より縮まなくなってしまいます。

対処法として、はみ出している子要素に

min-width: 0;

を追加してみてください。これでflex-shrinkが正しく効くようになり、テキストがコンテナ内で折り返されるようになります。

テキストが改行されずに省略記号（...）で切りたい場合は、min-width: 0と合わせて

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

も追加すると綺麗に収まります。縦方向（flex-direction: column）で同じ問題が起きている場合はmin-heightについても同様に考えてください。

Answers (1)