I’m having trouble constraining a div. I want content to scroll on a div inside of it, and I’m not sure how to get the pattern correct using Tailwind’s flex classes. I’ve tried a lot of different combinations of h-full, flex-grow, flex-none, and whatever else has turned up in various searches, but I haven’t had any luck getting it to work.
This is a general path I am trying to follow:
<div class="flex flex-col h-screen w-screen">
<div class="flex flex-row">Page Header</div>
<div class="flex flex-row h-2/3">
<div class="flex flex-col w-3/4 h-full"> <!-- This container is erroneously being allowed to expand --!>
<div class="flex flex-row">
Header Left
</div>
<div class="flex flex-row divide-x flex-grow">
<div class="flex flex-col w-1/3 flex-grow">
<div>Subhead 1</div>
<div class="flex flex-col gap-4 flex-grow overflow-y-auto">
// CONTENT TO SCROLL //
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-grow flex-col border-t-red-600 ">
<div>Lower Section Content</div>
</div>
</div>
Demonstration markup at the link below. I am trying to cut off the containers at the red line.
https://play.tailwindcss.com/dXYgxmJUcd
>Solution :
I’m not sure how you’d like the other containers to handle their overflow, but the concept of the solution remains the same. Element children of vertical flex layouts have min-height: min-content applied to them implicitly. We’d need to override this with a smaller value (say with min-height: 0) to allow the content to shrink appropriately.
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class="flex h-screen w-screen flex-col divide-y">
<div class="flex flex-row bg-teal-600 p-2 text-lg text-white">MyApp</div>
<div class="flex h-2/3 flex-row divide-x">
<div class="flex h-full w-3/4 flex-col">
<div class="h-13 flex flex-row items-center justify-between border-b p-2">
<div class="flex flex-row gap-2">
<div class="p-0.5 text-xl font-bold">Header Left</div>
</div>
<div class="flex flex-row gap-2"></div>
</div>
<div class="flex flex-grow flex-row divide-x min-h-0">
<div class="flex w-1/3 flex-grow flex-col gap-4 bg-gray-100 p-2">
<div class="text-2xl font-bold text-teal-600">Subhead 1</div>
<div class="flex flex-grow flex-col gap-4 overflow-y-auto">
<div class="flex flex-col border bg-white shadow">
<div class="border-b p-3 text-sm">Card A</div>
<div class="border-b px-3 py-5">đź“– Card Content</div>
</div>
<div class="flex flex-col border bg-white shadow">
<div class="border-b p-3 text-sm">Card B</div>
<div class="border-b px-3 py-5">đź“– Card Content</div>
</div>
<div class="flex flex-col border bg-white shadow">
<div class="border-b p-3 text-sm">Card C</div>
<div class="border-b px-3 py-5">đź“– Card Content</div>
</div>
<div class="flex flex-col border bg-white shadow">
<div class="border-b p-3 text-sm">Card D</div>
<div class="border-b px-3 py-5">đź“– Card Content</div>
</div>
</div>
</div>
<div class="flex w-2/3 flex-grow flex-col gap-4 p-2 min-h-0 overflow-y-auto">
<div class="text-2xl font-bold text-teal-600">Subhead 2</div>
<div class="flex flex-col gap-4 px-4">
<div class="flex flex-col rounded border border-gray-300 shadow-xl">
<div class="flex flex-row">
<div class="w-full border-b bg-gray-300 px-3 py-2 text-sm">Example 1</div>
<div></div>
</div>
<div class="w-full border-b px-3 py-4">🧑 Example Content</div>
<div class="flex w-full flex-row justify-between bg-gray-100 p-2 text-xs">
<div>Content Left</div>
<div>Content Right</div>
</div>
</div>
<div class="flex flex-col rounded border border-gray-300 shadow-xl">
<div class="flex flex-row">
<div class="w-full border-b bg-gray-300 px-3 py-2 text-sm">Example 2</div>
<div></div>
</div>
<div class="w-full border-b px-3 py-4">🧑 Example Content</div>
<div class="flex w-full flex-row justify-between bg-gray-100 p-2 text-xs">
<div>Content Left</div>
<div>Content Right</div>
</div>
</div>
<div class="flex flex-col rounded border border-gray-300 shadow-xl">
<div class="flex flex-row">
<div class="w-full border-b bg-gray-300 px-3 py-2 text-sm">Example 3</div>
<div></div>
</div>
<div class="w-full border-b px-3 py-4">🧑 Example Content</div>
<div class="flex w-full flex-row justify-between bg-gray-100 p-2 text-xs">
<div>Content Left</div>
<div>Content Right</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex w-1/4 flex-col max-h-full overflow-y-auto">
<div class="flex flex-col items-center border-b p-3">Supplemental Column</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
<div class="flex flex-col border-b p-2">
<div class="mb-1 flex flex-row justify-between border-b pb-1">
<div class="">Information</div>
</div>
<div class="text-xs">
<div>13 Data Points</div>
<div class="flex flex-row justify-between">
<div>Additional Information</div>
<div>3 Notifications</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-grow flex-col border-t-red-600">
<div class="flex flex-col items-center">
<div class="flex w-10 cursor-pointer flex-col items-center border-x border-b hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>
</div>
</div>
<div class="p-2 text-xs">Lower Section Content</div>
</div>
</div>