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>