例えばCSSの「overflow: scroll;」が効かない場合、
文章がずっと横にはみ出る場合、枠、親要素の中に収まりきらずに、
文章や子要素のサイズが横にずっと伸びる場合の対処法について。
overflowが効かない！文章がはみ出る｜Flexが原因かも
上にも書いたように文章や子要素のサイズが一生横に伸びていくパターン。
例えばこんなレイアウトのパターンの場合。
こういった場合というのは「Flexbox」を使っている場合に「overflow: scroll;」などが効かない事がある。
横に長い文章なんかが途中でスクロールせずに横に伸びてはみ出る、もしくは、
スクロールバーは出ているけど、なぜかボックスのサイズが横に伸びてしまう。
本来であれば、
こんな感じにしたいはずなのに、なぜか
こうなってしまうパターン。
そのおかげでレイアウトがおかしくなってしまうといったように、親要素が無限に伸びる問題については、
その親要素に「width」を使って、サイズをしてやればいいのだけれど、そんなにいちいちサイズを指定してる暇なんかない場合もあるはず。
そんな場合は可変する要素（Flexでサイズを指定している要素）に
「min-width: 0;」
を指定すればOK。
例えばこの画像の場合だと、赤枠にFlexをかけて、
中の水色の２と黄緑の３を横並びにして、それぞれのサイズを指定しているので
この赤枠の要素に「min-width: 0;」を指定してやればOK。
そうする事で文字が枠から横にはみ出す事もなく、子要素が横に伸びるといった事もなくなるはず。
一度ぜひ試してもらえればと。
