The first child div is a sidebar and the second a table:
<div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row"><div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto"><!-- Sidebar (md:max-w-64) --></div></div><div class="flex w-full flex-col items-start justify-start gap-6"><!-- Table --></div></div>The sidebar is causing the layout to have a second horizontal scrollbar at the bottom:
I know it's the sidebar because that second scrollbar disappears if I remove the sidebar:
https://play.tailwindcss.com/AU3667Sv4d
What's the issue here and how to fix it?