うるおいらんど

flex内のアイテムが指定幅を超えちゃう問題

作成日
更新日

問題

Tailwindを使ったCSSの問題。

<aside class="hidden lg:flex flex-col w-72 h-screen fixed pt-40 left-0 z-40">
  <nav class="relative p-2 h-full">
    <div class="flex flex-col justify-between h-full">
      <div class="flex-1 h-full">
        <div class="flex h-full pb-4">
          <div class="w-8 mt-4"></div> <!-- ← 固定幅サブメニュー -->
          <div class="flex-1 h-full py-1"></div> <!-- ← これが w-72 を超える原因 -->
        </div>
      </div>
    </div>
  </nav>
</aside>

原因

  • flex-1 の親の幅が制約されていない状態で w-72 を超えて広がる

  • flex-1 は「親が display: flex かつ明確な制約があるとき」だけ正しく効きます。

  • ただし今回の親子階層では、内側の .flex（div.flex）に min-width: 0 がないため、内部要素が縮まらずオーバーフローしている可能性が高いです。

解決

min-w-0 を追加する

<div class="flex h-full pb-4 min-w-0">
  <div class="w-8 mt-4"></div>
  <div class="flex-1 h-full py-1 min-w-0">...</div>
</div>

これがいいらしい。

<aside class="w-72 h-screen fixed">
  <nav class="h-full p-2">
    <div class="flex flex-col justify-between h-full">
      <div class="flex-1 h-full">
        <div class="flex h-full pb-4 min-w-0">
          <div class="w-8 mt-4 bg-red-200">sidebar</div>
          <div class="flex-1 h-full py-1 min-w-0 bg-green-200">content</div>
        </div>
      </div>
    </div>
  </nav>
</aside>

flex を指定したところと、flex-1 を指定したところの両方に min-w-0 を追加した。

サイトアイコン
公開日
更新日