CSS Layout: Fixed header/footer and sub-header within content

I am working on a web application and want to have the following layout:

<div class="wrapper">    --header--<div class="header"></div>    --body--<div class="content">        --header within body--<div class="sub-header"></div>        ---scrollable content-<div class="scrollable-content"></div></div>    --footer--<div class="footer"></div></div>

CSS:

.wrapper {    display: flex;    flex-direction: column;    height: 100vh;}.header {    flex: 0 0 auto;}.content {    overflow-y: scroll;    flex: 0 1 auto;}

I want to assign the remaining height with scroll to the "scrollable-content" div. I have come across answers where the entire content is scrollable, but that's not the case here.

Any help would be great