I want to have a page that consums the full height of the browser window. I have a navbar on top and then the main content is split into a list of cards on the left (which should be scrollable), and a map on the right side (which should consume the full height minus the navbar and should NOT be scrollable.
Problem: the entire page (so also the map) is scrollable - it looks like as much scrollable as the navbar's height.
<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen bg-yellow-400">
<div class="py-8">
my navbar
</div>
<div class="flex h-full">
<div class="w-2/5 h-full flex flex-col gap-6 justify-start items-center overflow-y-scroll p-8 bg-blue-400">
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
</div>
<div class="w-full h-full bg-red-400">map</div>
</div>
</div>Consider applying a vertical flex layout, so that the container for the cards and map can grow/shrink in the space left by the remainder of the navigation bar.
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<div class="h-screen bg-yellow-400 flex flex-col">
<div class="py-8">
my navbar
</div>
<div class="flex flex-1 min-h-0">
<div class="w-2/5 h-full flex flex-col gap-6 justify-start items-center overflow-y-scroll p-8 bg-blue-400">
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
<div class="w-full h-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
</div>
<div class="w-full h-full bg-red-400">map</div>
</div>
</div>I'll assume you are using Tailwind v3 (instead of v1 in your snippet), as implied by the arbitrary value classes used.