Скролл показывает не весь контент
Хочу добавить скролл к блоку header__navigation header-navigation но при скролле не отображается весь контент тоесть скролл останавливается и некоторые элементы остаются внизу вне видимости. Для мобилок
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
/*-----------------Colors-----------------*/
--global-color-bg-primary: rgb(33, 55, 53);
--global-color-text-primary: rgb(225, 242, 231);
--global-color-text-secondary: rgb(33, 55, 53);
--global-color-heading: rgb(33, 55, 53);
--global-color-button-bg-primary: rgb(33, 55, 53);
--global-color-button-bg-secondary: rgb(225, 242, 231);
}
html {
font-size: 100%;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: "Montserrat", sans-serif;
}
button {
font-family: "Montserrat", sans-serif;
}
.wrapper {
height: 100%;
width: 100%;
}
._container {
padding: 0px .9375rem;
}
.header {
--header-logo-size: 1.875rem;
--header-logo-weight: 700;
--header-burgerSize: 23px;
display: flex;
flex-direction: column;
}
.header__container {
}
.header__body_mobile {
display: flex;
justify-content: space-between;
padding: 20px 0px;
}
.header__logo {
color: var(--global-color-text-secondary);
font-size: var(--header-logo-size);
font-weight: var(--header-logo-weight);
user-select: none;
}
.header-navigation {
--headerNav-buttonList-marginTop: 1.875rem;
max-height: 100vh;
overflow-y: auto;
}
.header-navigation__links li {
position: relative;
}
.header-navigation__links li a {
display: block;
padding: .9375rem 0rem;
color: var(--global-color-text-secondary);
font-size: 1.25rem;
font-weight: 500;
}
.header-navigation__links li:not(:first-child) {
margin-top: 1.25rem;
}
.header-navigation__links li:not(:first-child)::before {
content: "";
position: absolute;
left: 0;
top: -0.5rem;
width: 100%;
height: .0625rem;
background: rgb(166, 166, 166);
}
.header-navigation__buttons {
margin-top: var(--headerNav-buttonList-marginTop);
}
.header-navigation__buttons li:not(:first-child) {
margin-top: 20px;
}
<div class="wrapper">
<header class="header">
<div class="header__container _container">
<div class="header__body_mobile">
<h1 class="header__logo">CALORI</h1>
</div>
<nav class="header__navigation header-navigation">
<ul class="header-navigation__links">
<li><a href="#">How it works</a></li>
<li><a href="#">Why Calori</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="header-navigation__buttons">
<li><button type="button" class="_button-primary">Call to action</button></li>
<li><button type="button" class="_button-primary">Call to action</button></li>
<li><button type="button" class="_button-primary">Call to action</button></li>
</ul>
</nav>
</div>
</header>
</div>