CSS overflow auto не работает для дочернего элемента

Я делаю вертикальное окно. Когда меню выходит за пределы, должно скроллиться. Для родительского элемента добавляю overflow: hidden, a для для дочернего элемента օverflow։auto. Скролл не работает.

html

<div class="burger__menu_container burger__menu_containerx">
      <ul class="burger__menu">
         <li class="burger__list"><a href='/'>Home</a></li>
         <li class="burger__list"><a href="/services">Our Services</a></li>
         <li class="burger__list"><a href="/about"></a>About Us</li>
         <li class="burger__list"><a href="/contact">Contact Us</a></li>
         <li class="burger__list"><div>...</div></li>
      </ul>
   </div>

scss

.burger__menu_container {
   position: absolute;
   top: 0;
   right: 0px;
   height: 100vh;
   width: 300px;
   background-color: white;
   z-index: 10;
   transform: translateX(700px);
   overflow: hidden;
   transition: all 0.5s;
}
.burger__menu_containerx {
   transform: translateX(0);
   transition: all 0.5s;
}
.burger__menu {
   list-style: none;
   width: 100%;
   padding: 100px 50px 0px 50px;
   min-height: 100%;
   overflow: auto;
   position: relative;
}
.burger__list {
   margin: 10px 0;
   a {
      text-decoration: none;
      display: block;
      color: #000;
   }
}