How to make element in flex child full height? [closed]

I have this block of code that's pretty standard for making a proper layout.

<div class="min-h-screen bg-slate-900 text-white flex flex-col"><header class="bg-red-950"><a href="#">Navbar</a></header><main class="flex-1 bg-sky-950"><div class="bg-yellow-950">Make me full height of my parent without modifying my parent tag.</div></main><footer>I'm a footer.</footer></div>

The issue is I need a child element inside of main that can expand to the full height of the parent element without using the same flexbox trick to expand it.

Absolute positioning won't work here because if the content should ever reach the bottom of the page the footer should move down.

Does anyone have a way to do this?

Here's a tailwind play link: https://play.tailwindcss.com/DwxTyJxTzR