How to make sticky header without knowledge about its height.

My app structure looks like this: https://codepen.io/H4ds0n/pen/MWZvBGP

So i thought ok then, i will make my body 100dvh and ten overflow:scroll and put the header sticky. And everything was ok utill I started to working with react-select and its dropdown. When dropdown shows then weird thing started going on (it seems like html was scrolling down even if target dropdown was body ??)

One solution I saw was that people were making header fixed but then the content has to have padding-top with height the same as height of the header. How do I do this properly ?
CodePenH4ds0n
...
MWZvBGP
Was this page helpful?