Flex アイテムがコンテナからはみ出してしまう時の対処方法

September 01, 2021

意図せず Flexbox で横並びにした箇所がコンテナからはみ出してしまうことないですか?そんな時の対処方法を自分用のメモ代わりに残しておきます。

対処方法

結論から言いますと、Flex アイテムに min-width: 0; を入れれば解決します。(横並びの場合)

flex-shrink1 にしていても Flex アイテムはコンテンツの最小サイズよりも縮小しないので、長い文字列があると正しい比率でリサイズされずはみ出してしまうことがあるようです。

また、overflow-wrap: break-word; などの禁則処理を適用してても min-width: 0 がないとうまく折り返してくれません。

原因

Flex アイテムの min-width の初期値が auto になっていて、それが flex-basis の値よりも優先されてしまう仕様のようです。その為にコンテンツに合わせて幅が変化してしまいます。 min-width: 0 を入れて初期値 auto を上書きすることで flex-basis の値が優先して適用されます。

参考

Demo

デモ作りました。左が min-width: 0 なし、右がありです。左はやはりはみ出してしまってますね。


Profile picture

Johnny Okafuji
フロントエンドエンジニア / ビートルズバンド Crescendo Four のジョン・レノン担当。/ Love Darts🎯 / 独学でコーチング勉強中 / コーチング関係の記事は note に書いてます。
Twitter: @johnykei
note: https://note.com/johnykei

© 2021 All rights reserved.