💨
Flex アイテムがコンテナからはみ出してしまう時の対処方法
意図せず Flexbox で横並びにした箇所がコンテナからはみ出してしまうことないですか？そんな時の対処方法を自分用のメモ代わりに残しておきます。
対処方法
結論から言いますと、Flex アイテムに min-width: 0; を入れれば解決します。（横並びの場合）
flex-shrink を 1 にしていても Flex アイテムはコンテンツの最小サイズよりも縮小しないので、長い文字列があると正しい比率でリサイズされずはみ出してしまうことがあるようです。
また、overflow-wrap: break-word; などの禁則処理を適用してても min-width: 0; がないとうまく折り返してくれません。
原因
Flex アイテムの min-width の初期値が auto になっていて、それが flex-basis の値よりも優先されてしまう仕様のようです。その為にコンテンツに合わせて幅が変化してしまいます。 min-width: 0 を入れて初期値 auto を上書きすることで flex-basis の値が優先して適用されます。
参考
- Flex items and min-width:0 | Dominic McPhee – Front End Developer
- html - Why don't flex items shrink past content size? - Stack Overflow
- Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita
デモ
デモ作りました。左が min-width: 0 なし、右がありです。左はやはりはみ出してしまってますね。
Discussion