レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~ by 澤 佳祐

「overflow: auto を指定したのに横スクロールできない」「長いコンテンツが親要素を突き抜けてしまう」そんな経験はありませんか？
私自身、横スクロールが効かない問題に直面した際、原因は親要素に設定された flex-direction: row でした。
実は、こうした構造的なレイアウト崩れは、FlexboxではなくGridを使うことでスマートに解決できるケースが少なくありません。
本LTでは、実際に遭遇した問題を通じてFlexboxの仕組みを解説しつつ、Gridレイアウトがより適切な選択肢となる理由をお伝えします。
min-width: auto の罠、不要なdivの増加、非セマンティックなHTML構造といった問題が、Gridでどのようにスマートに解決されるかを実例を交えて紹介します。
「とりあえずFlex」から一歩進み、意図に応じたレイアウト手法を選べる開発者を目指しましょう。