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>