I'm trying to get main and div#undermain to take up the remaining height of the layout, but they won't do it. Here's the HTML (using Tailwind utility classes):
<body><div class="min-h-screen w-screen overflow-auto bg-black"><nav class="flex w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pr-6 pl-3"><img src="./someurl.svg" /><h1 class="text-2xl text-green-500">Delivert</h1></nav><main class="h-full w-full"><div id="undermain" class="flex h-full w-full items-center justify-center"><button class="bg-green-500"> sign in</button></div></main></div></body> I'm aware that flexbox is an easy approach to such a problem, but the only thing I've tried that worked was the following:
- give the highest
div(the one right underbody)display: flexandflex-direction: column - give
mainflex-grow: 1anddisplay: flex - remove
height: 100%from#undermain
But I feel like this solution is weird and not CSS-y.