Скролл показывает не весь контент

Хочу добавить скролл к блоку 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>


Ответы (0 шт):