Add Scrollbar to page with header and content

Issue

Imagine I have the following page:

The problem I got is that the scrollbar ends outside of my viewpoint. How do I archive this, that the scrollbar is exactly long as my viewport. This also means if I resize my browser window the height of my scrollbar should be changed to it. I tried to use viewport height (vh) but im not able to archive this as I`m using a header with a fixed position.

Btw. im using Vue if there is any vue specific solution feel free.

here is a example

<Header></Header> // header with fixed position and height of 8rem
<div class="wrapper">
 <div class="content">
 </div
</div>

.wrapper
 max-height: 100vh

.content
  margin-top: 8rem
  height: 100vh // I was hoping this would take 100% of my wrapper since the wrapper can only contain the max height of my current screen
  overflow-y: auto

Solution

header {
  height:8rem;
  background-color: gray;
}
.wrapper {
  max-height: calc(100vh - 8rem);
}

.content {
  overflow-y: scroll; 
}

https://codepen.io/homie_veroni/pen/VwgPEdd

Answered By - homie_v