Не срабатывает overflow-y: auto; скролит не до конца

.menue {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.92), rgba(12, 12, 12, 0.92)), url(/img/bg-img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: opacity 0.3s linear, visibility 0.3s linear;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px 20px 40px 39px;
}

.menue.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* overflow-y: hidden; */
}

.menu-close-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  margin-left: auto;
  visibility: inherit;
}

.header-nav-list-mob {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 186px;
  margin-bottom: 0;
  padding: 0;
  color: #FBFBFB;

}

.header-nav-item-mob {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  /* position: relative; */

}

.header-icons-list-mob {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.header-icon-item-mob {
  padding: 7.2px;
  border: 1px solid #FBFBFB1A;
  border-radius: 10px;
}

.header-icon-mob {
  fill: #F3F3F3;
  transition: fill 0.3s linear;
}

.header-icon-mob:hover,
.header-icon-mob:focus {
  fill: #FBFBFB;
}
@media screen and (min-width: 375px) {
.menue {
    width: 200px;
    height: 812px;

  }

  .menu-close-btn {
    margin-top: 20px;
    margin-right: 20px;
    width: 34px;
    height: 34px;
    /* padding: 0; */
  }

  .header-icons-list-mob {
    margin-bottom: 40px;
    margin-top: 260px;
  }

  .header-icon-mob {
    width: 18px;
    height: 18px;
  }

  .header-link-icon {
    width: 18px;
    height: 18px;
    display: block;
  }

}

<div class="menue is-open" id="menue">
  <button type="button" class="menu-close-btn">
    <svg class="close-btn" width="40" height="40">
      <use
        class="btn-close-icon"
        href="./img/icons.svg#icon-menu-close"
      ></use>
    </svg>
  </button>
  <ul class="header-nav-list-mob">
    <li><a class="header-nav-item-mob" href="#header">Home</a></li>
    <li>
      <a class="header-nav-item-mob" href="#about-us">About Us</a>
    </li>
    <li><a class="header-nav-item-mob" href="#catalog">Catalog</a></li>
    <li><a class="header-nav-item-mob" href="#sale">Sale</a></li>
    <li><a class="header-nav-item-mob" href="#reviews">Reviews</a></li>
    <li>
      <a class="header-nav-item-mob" href="#contact-us">Contact Us</a>
    </li>
  </ul>
  <ul class="header-icons-list-mob">
    <li class="header-icon-item-mob">
      <a
        class="header-link-icon"
        href="https://www.facebook.com/goITclub/"
        target="_blank"
      >
        <svg width="20" height="20" class="header-icon-mob">
          <use href="/img/icons.svg#icon-facebook"></use>
        </svg>
      </a>
    </li>
    <li class="header-icon-item-mob">
      <a
        class="header-link-icon"
        href="https://www.instagram.com/goitclub/"
        target="_blank"
      >
        <svg width="20" height="20" class="header-icon-mob">
          <use href="/img/icons.svg#icon-instagram"></use>
        </svg>
      </a>
    </li>
    <li class="header-icon-item-mob">
      <a
        class="header-link-icon"
        href="https://www.youtube.com/c/GoIT"
        target="_blank"
      >
        <svg width="20" height="20" class="header-icon-mob">
          <use href="/img/icons.svg#icon-youtube"></use>
        </svg>
      </a>
    </li>
  </ul>
</div>