主页 / coding / 问题 / 79297636
Accepted
Ben
Asked: 2024-12-20 23:04:39 +0800 CST

overflow-x-auto 在 tailwind 网格中不起作用

  • 772

我试图在网格中放置一个带有 overflow-x-auto 的 div，但该 div 仍然最大，因为父级尺寸为 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.tai​​lwindcss.com/HpULo02BYA

tailwind-css

1 个回答

  1. Best Answer

    应用于min-width: 0。<section>这将覆盖min-width: min-content由于其处于网格布局中而隐式应用于它的 。

    <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

相关问题