overflow-x-auto don't work in tailwind grid

Question

I'm trying to have a div with overflow-x-auto in a grid, but the div still biggest as the parent size 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

Answer 1

Apply min-width: 0 to the <section>. This overrides the min-width: min-content that is implicitly applied to it due to it being in a grid layout.

<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>