Scrolling element inside a fill-height element - html

Question

I need to create a web layout with a header and a main area. The header's height will grow with its content and the main area will fill the remaining vertical space. Cool, this is easily done either with flex or grid. BUT! Inside the main area I need another element (let's call him badboy) which can have a lot of content and I need it to scroll, not to stretch my main area beyond the lower border of my page.
For the main area I have tried flex with flex-grow: 1 or grid row with size auto. But since such elements do not have a specific height, the badboy always stretches the main element so no overflow happens anywhere.
My HTML:
<div class="app">
<header></header>
<main>
<div class="badboy"></div>
</main>
</div>
The Layout:
If only I could fix the height of the header to a specific height, I could use calc to set the main area's height exactly and problem solved. But my header needs to grow with content. There already is a similar question here saying its impossible, but it is 5 years old and CSS has come long way since then.

Answer 1

Ok, so by digging around some more I have come up with this solution with CSS grid. I don't know if this is hacky or just regular stuff, but it seems to work.
.app {
width: 100vw;
height: 100vh;
grid-template-columns: 100%;
grid-template-rows: fit-content(1px) minmax(1px, auto);
display: grid;
}
header {
background: lightgray;
}
main {
background: gray;
}
.badboy {
max-width: 40rem;
margin: 0 auto;
max-height: 100%;
overflow-y: auto;
background-color: white;
}