Need Help Making Inner Div Scrollable without Explicit Height

Hey folks!,

I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height.

Here's a brief overview of what I'm trying to achieve:

Header and footer should have auto height.
Main content area should fill the remaining space and be scrollable if needed.

I've tried using CSS Flexbox and Grid, but I'm running into an issue where the scrollbar appears on the body itself rather than just the main div.

Code Pen: https://codepen.io/Gaurav-Kuma-R/pen/xxevyJm

If anyone has experience with this or knows a workaround, I'd really appreciate your help!

Thanks a bunch for any assistance you can offer!