Início / coding / Perguntas / 79297636
Accepted
Ben
Asked: 2024-12-20 23:04:39 +0800 CST

overflow-x-auto não funciona na grade tailwind

  • 772

Estou tentando ter uma div com overflow-x-auto em uma grade, mas a div ainda é maior que o tamanho pai max-w-2xl.

<main class="grid mx-auto mt-20 min-h-screen w-full max-w-2xl gap-16 bg-gray-100 px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
  <section class="mb-20">
    <div class="w-full overflow-x-auto">
      <div class="flex space-x-4 pb-4">
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
      </div>
    </div>
  </section>
</main>

https://play.tailwindcss.com/HpULo02BYA

tailwind-css

1 respostas

  1. Best Answer

    Aplicar min-width: 0ao <section>. Isso substitui o min-width: min-contentque é implicitamente aplicado a ele devido a estar em um layout de grade.

    <script src="https://cdn.tailwindcss.com/3.4.16"></script>

<main class="grid mx-auto mt-20 min-h-screen w-full max-w-2xl gap-16 bg-gray-100 px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
  <section class="mb-20 min-w-0">
    <div class="w-full overflow-x-auto">
      <div class="flex space-x-4 pb-4">
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
      </div>
    </div>
  </section>
</main>

    • 1

relate perguntas