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?
2
Answers
working example
Elements in a horizontal flex layout have
min-width: min-content
applied implicitly. When the sidebar is visible, the two element’smin-content
may exceed the viewport width, introducing the viewport horizontal scrollbar.To work around this, consider overriding the
min-width
to0
, so that the element containing the table can shrink as much as needed to fit horizontally:Tailwind Play