flexboxで段組をするときは、大量のテキストが入った場合を想定しよう - Qiita

気付いている方は、けっこういるかも知れませんが… Bootstrap4の可変グリッド（col-{breakpoint}-auto）には、本来の幅を超える改行が含まれないテキストが入ったときに崩れる不具合があります。 https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content 本来想定されている見た目 開発者ツールで大量のテキストを流し込んだ状態 これを修正しようとすると、ほぼすべてのグリッドに手を入れなければならないらしいので、ここではこの問題に関する解決策は割愛しますが、このような挙動が起こる原因について書いておきます。 flex-shrinkの役割 結論から書くと、 flex-shrink:1 を指定していないためです。 こちらに、floatを使った場合と、Flexboxを使った場合のサンプルを作りました。