How do I get the menu to have a scroll - css

Question

My menu box has more content to show but i cannot scroll down to see that content , it just disappears. I have tried doing overflow-y: auto; but does not work.
Here is my code
<div class="nav-cont d-flex align-items-center justify-content-end">
<div class="col-md-3">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box d-flex flex-column ">
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Most Popular</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Batteries</a></li>
<li><a class="menu__item" href="#">Engine Oil</a></li>
<li><a class="menu__item" href="#">Spark Plugs</a></li>
<li><a class="menu__item" href="#">Tyres</a></li>
<li class="menu-btn-expand"><a class="menu__item" href="#">Show More</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop Deals</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Top Deals</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop By</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">By Make</a></li>
<li><a class="menu__item" href="#">By Model</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Trustworthy Advice</p>
</div>
</ul>
</div>
</div>
Here is the CSS
/*Hamburger Menu*/
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: relative;
top: -1rem;
left: 3rem;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 5px;
background-color: #616161;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow-y: auto;
transition-duration: 0.25s;
}
.menu__box li a {
font-size: 0.8rem;
font-family: "Poppins";
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
border-top: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #f5f5f5;
}
.menu-line-break {
background-color: #f5f5f5;
width: 80%;
height: 0.2rem;
margin: 0.5rem auto;
}
.menu-btn-expand {
text-decoration: underline;
}
.menu-title-container {
width: 100%;
}
I appreciate the help in advance. Thank you. I do not know where the problem is from , I am a bit new to this .

Answer 1

I removed the overflow-y: auto; and added overflow: auto; removing the hidden part from either side.
.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: calc(100% - 100px);
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow: auto;
transition-duration: 0.25s;
}