【flexbox】flex-direction:columnで起こるIE 11のレイアウトバグに対応する | ファブリカコミュニケーションズ

レスポンシブデザインが主流となり、コンテンツの並び方向や出現順をCSSだけで簡単に変更できることからflexboxを使用することが多くなっています。 しかしIE11にも対応させる必要がある場合は頻繁にレイアウトバグが起こるため実装には注意が必要です。 バグの種類は多岐にわたりますが、今回は「flex-direction:column」や「flex-direction:column-reverse」を使用した際に起こるレイアウトバグの発生原因とその修正方法を紹介します。 想定するレイアウト 3列のボックス（flexコンテナー）があり、それぞれイメージ・テキスト・リンクの各アイテムを配置するとします。 リンクアイテムを下付きで配置したいので、テキストアイテムをイメージとリンクアイテム以外の隙間をすべて埋める形で、すべてのテキストアイテムの高さが同じになるようなレイアウトを想定します。 テキスト

[sugarte]

flex-direction:columnした時の要素はみ出しとか伸び過ぎ問題についての解決方法がわかりやすくまとまってる