There are many examples here on Stack Overflow and on the internet that explain how to make a sibling element fill up the remaining vertical screen space using flexbox, for example this highly upvoted Q & A.
They all work for a basic page structure such as this:
<body><header> Some small height.</header><main> Fills the rest of the vertical screen space.</main></body>Now my problem with all those solutions is that I don't want a sibling element to take up the remaining vertical screen space, but the first child of that sibling. This is the page structure:
<body><header> Some small height.</header><main><section id="first"> Fills the rest of the vertical screen space *exactly*.</section><section> Lots and lots of content that gets pushed below the bottom of the screen, but can be scrolled up. It's important that the whole page – including the header – can be scrolled normally! So no fixed header (or footer). This section retains it's height when the page is scrolled!!!</section></main><footer> Common footer information.</footer></body>Here is an image of what the layout would look like:
How can I achieve that? (Or is there a duplicate that I didn't find that explains this?)
I would prefer a flexbox solution.