Overflow auto does not show all content - html

Question

So I'm trying to make an hamburger menu, and when the button is clicked it comes from top since it's styled as top: -100% at the beginning.
It's working fine but when its height is bigger than window height, overflow: auto makes vertical scroll so i can get to the bottom of menu.
The problem is that i cant always get to the very bottom and i dont see the bery last item, because it depends on window height.
.header__menu_mobile {
position: fixed;
top: -100%;
left: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: white;
color: #252525;
z-index: 3;
overflow: auto;
transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
font-weight: 300;
font-size: 16px;
line-height: 19px;
width: 100%;
}
.header__menu_mobile .header__list li {
width: 100%;
padding: 20px 0;
}
.header__menu_mobile .header__list li a {
text-decoration: none;
color: #252525;
}
.header__menu_mobile.active {
top: 63px;
}
<div class="header__menu_mobile">
<div class="container">
<ul class="header__list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<div class="contacts">
<a class="contact">Email</a>
<a class="contact">Instagram</a>
<a class="contact">Facebook</dav>
</div>
</div>
</div>
Meybe the problem is top: 63px while menu is active, but in this layout it has to be excactly like this. When i change it to top: 0, overflow auto shows me the last item on every window height.
So meybe these 63px is also taken away from the bottom of menu. But what should i do?

Answer 1

Thanks for help. The problem was solved when i changed height: 100% to height: calc(100% - 63px);. Thanks #Cbroe and #DiegoD for help