TailwindCSS flex-grow / shrink テクニック三選｜伸縮の落とし穴

TailwindCSS flex-grow / shrink の使い方で困っていませんか？grow を付けたのに伸びない、shrink で縮みを止められない…。この記事では、flex-grow / shrink でよくある3つの落とし穴と解決策を紹介します。

この記事で学べること

TailwindCSS flex-grow / shrink（grow、shrink、shrink-0 など）を使っていて、「なぜか思った通りにならない」と感じたことはありませんか？

この記事では、flex-grow / shrink でよくある3つの誤解と、その解決策を紹介します。

• shrink を付けたのに要素が縮んでしまう理由
• grow を付けたのにサイドバーが縮む原因と対処法
• grow を両方に付けても 1:2 にならない仕組み

実際のコード例と画像で解説するので、同じ問題で悩んでいる方はぜひ参考にしてください。

---

【体験談】私も flex-grow で苦い経験があります

私も flex-grow で苦い経験があります。

思うように要素を伸ばせなくて、結局使うのを断念したことがありました。最終的には有識者に書いてもらって解決しましたが、当時は「なんでこんなに難しいんだ…」と思っていました。

この記事では、私が躓いたポイントを整理してお伝えします。同じように悩んでいる方の参考になれば嬉しいです。

---

flex-grow / shrink テクニック三選

それでは、flex-grow / shrink でよくある3つの落とし穴と解決策を見ていきましょう。

テクニック1：shrink を付けたのに縮んでしまう

誤解シナリオ

1. 読者Aさんはサイドバーが縮んでしまう問題を解決したい
2. 公式ドキュメント（https://tailwindcss.com/docs/flex-shrink）で shrink を見つける
3. 「これで縮み方を制御できるのか」と思い shrink を適用
4. 「あれ？まだ縮んでしまう…」と困惑

NG：shrink を付けても変わらない

<div class="flex gap-4 bg-slate-700 p-4 max-w-md">
  <div class="w-32 shrink bg-blue-500 text-white p-4 rounded">サイドバー</div>
  <div class="bg-white p-4 rounded">メインコンテンツ。長いテキストがあるとサイドバーが縮みます。</div>
</div>

shrink は flex-shrink: 1（縮む）を設定しますが、これはデフォルト値です。付けても何も変わりません。

OK：shrink-0 で縮まないようにする

<div class="flex gap-4 bg-slate-700 p-4 max-w-md">
  <div class="w-32 shrink-0 bg-blue-500 text-white p-4 rounded">サイドバー</div>
  <div class="bg-white p-4 rounded">メインコンテンツ。長いテキストがあってもサイドバーは縮みません。</div>
</div>

shrink-0 は flex-shrink: 0（縮まない）を設定します。これで要素の幅が維持されます。

ポイント

要素が縮むのを防ぎたいときは、shrink ではなく shrink-0 を使いましょう。shrink はデフォルト値なので付けても効果がありません。

---

テクニック2：grow を付けたらサイドバーが縮む

誤解シナリオ

1. 読者Bさんはサイドバー + メインコンテンツのレイアウトで、メインを残りスペースいっぱいに伸ばしたい
2. 公式ドキュメント（https://tailwindcss.com/docs/flex-grow）で grow を見つける
3. 「これだ！」と思いメインコンテンツに grow を適用
4. 「あれ？メインは伸びたけど、サイドバーも一緒に縮んでしまう…」と困惑

NG：grow だけでは不十分

<div class="flex gap-4 bg-slate-700 p-4 max-w-md">
  <div class="w-32 bg-blue-500 text-white p-4 rounded">サイドバー</div>
  <div class="grow bg-white p-4 rounded">メインコンテンツ。長いテキストがあるとサイドバーが縮みます。</div>
</div>

grow でメインは伸びますが、サイドバーに shrink-0 がないとスペースが足りないときに縮んでしまいます。

OK：grow + shrink-0 の組み合わせ

<div class="flex gap-4 bg-slate-700 p-4 max-w-md">
  <div class="w-32 shrink-0 bg-blue-500 text-white p-4 rounded">サイドバー</div>
  <div class="grow bg-white p-4 rounded">メインコンテンツ。長いテキストがあってもサイドバーは縮みません。</div>
</div>

サイドバーに shrink-0 を付けることで、固定幅を維持しながらメインが残りを埋めます。

ポイント

固定幅 + 可変幅のレイアウトを作るときは、固定側に shrink-0、可変側に grow を組み合わせましょう。

---

テクニック3：grow を両方に付けたのに 1:2 にならない

誤解シナリオ

1. 読者Cさんは2つの要素を 1:2 の比率で並べたい
2. 公式ドキュメント（https://tailwindcss.com/docs/flex-grow）で grow を見つける
3. 両方に grow を付ければ伸びるはず、と思い適用
4. 「あれ？両方同じ幅になってしまう…」と困惑

NG：両方 grow で 1:1 になる

<div class="flex gap-4 bg-slate-700 p-4">
  <div class="grow bg-white p-4 rounded">1の比率</div>
  <div class="grow bg-blue-500 text-white p-4 rounded">2の比率にしたい</div>
</div>

grow は flex-grow: 1 を設定するため、両方に付けると 1:1 の比率になります。

OK：grow と grow-[2] で 1:2 にする

<div class="flex gap-4 bg-slate-700 p-4">
  <div class="grow bg-white p-4 rounded">1の比率</div>
  <div class="grow-[2] bg-blue-500 text-white p-4 rounded">2の比率</div>
</div>

grow-[2] で flex-grow: 2 を設定することで、1:2 の比率で分配されます。

ポイント

要素を特定の比率で分配したいときは、grow-[数値] で比率を指定しましょう。grow だけでは全て 1:1 になります。

---

まとめ

TailwindCSS flex-grow / shrink の3つのテクニックを紹介しました。

• 要素が縮むのを防ぎたいとき → shrink-0 を使う（shrink はデフォルト値）
• 固定幅 + 可変幅のレイアウト → 固定側に shrink-0、可変側に grow
• 比率を指定して分配したいとき → grow-[数値] で比率を設定

flex-grow / shrink は伸びる・縮むの制御なので、両方を意識して組み合わせるとうまくいきます。

最初は難しく感じますが、実際に Tailwind Play で試すと感覚がつかめてきます。ぜひ試してみてください。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）