I have the following HTML:
<div class="bg-gray-100 pb-4 h-full"><div class="w-[200px]"> sidebar</div><div><header class="bg-white p-6 font-bold text-3xl"> @yield('heading')</header> @yield('breadcrumbs')<main class="bg-white border border-gray-200 mx-4 p-4"> {{-- @include('app._errors')--}}<div class="overflow-x-auto"><table class="min-w-[2000px]"><tr><td>hi</td></tr></table></div> {{-- @yield('content')--}}</main></div>If I add flex to the outer div:
<div class="bg-gray-100 pb-4 h-full flex"> <!-- // here --><div class="w-[200px]"> sidebar</div><div><header class="bg-white p-6 font-bold text-3xl"> @yield('heading')</header> @yield('breadcrumbs')<main class="bg-white border border-gray-200 mx-4 p-4"> {{-- @include('app._errors')--}}<div class="overflow-x-auto"> <!-- This no longer works and the table stretches the div instead --><table class="min-w-[2000px]"><tr><td>hi</td></tr></table></div> {{-- @yield('content')--}}</main></div></div>The table now stretches it's parent div
How can I make it so that I'm able to have a sidebar AND use the overflow-x for the table?
I've asked ChatGPT over and over but I can't find a solution, I've tried googling, I just can't find the answer