CSS Flexible Sticky Header which may Grow and Pushes Below Items Down

I am trying to create a Sticky Header, where the Sticker Header can grow (Green Box), if user chooses more documents in left grid (not pictured).

Everything else should be push downed correspondingly (in the blue box). Not sure how to do this, since all the resources say sticky header position:fixed and body padding-top is at set amount.

Error - Right now the blue sticky header, is eating over the Green box, as more document titles are added.

There are 3 boxes below, Black is overall container, Green is top Sticky Header, and Blue is Body.

Sticky header should hold, while user scrolls down to read long body.

Alternative: Currently using Javascript below, wonder if there is way to conduct strictly with CSS, flexbox, no Js.

document.getElementById("bluebox-body-id").style.paddingTop = (50 * numberOfDocuments).toString()+ "px";

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Utilizing Angular framework, just fyi ,

It will get resolved if you change the position property.

Change it to sticky: position:sticky