我试图在网格中放置一个带有 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>