optim-keisuke-sawa https://blog.hatena.ne.jp/optim-keisuke-sawa/ OPTiM TECH BLOG https://tech-blog.optim.co.jp/ React Advent Calendar 本記事では、フロントエンド開発でよくある「横スクロールができない」「コンテンツが親要素を突き抜ける」問題を、Flexbox特有の仕様（min-width: auto）を原因として解説します。 実際の事例として、MUIのStackコンポーネントを使ったFAQページ実装で発生したレイアウト崩れを紹介し、 解決策として min-width: 0 の指定やGridレイアウトの採用を提案。 さらに、FlexboxとGridの特性を比較し、適切な使い分けのポイントを整理しました。 「とりあえずFlex」から卒業し、要件に応じたレイアウト選択の重要性を伝える内容です。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-blog.optim.co.jp%2Fentry%2F2025%2F12%2F01%2F150000" title="レイアウト構築の基本を理解しよう ~ 横スクロールが起きない！？ Flex脱却編 ~ - OPTiM TECH BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/o/optim-tech/20251127/20251127105625.png Hatena Blog https://hatena.blog 2025-12-01 15:00:00 rich https://tech-blog.optim.co.jp/entry/2025/12/01/150000 1.0 100%