如何滚动并完全显示移动菜单的扩展区域？

Question

我创建的多层移动菜单在小屏幕高度上显示出奇怪的行为：当子菜单区域展开时，滚动出 vh 时没有背景颜色，子区域的滚动高度似乎由开始屏幕的高度而不是定义可见菜单区域和扩展子菜单区域时，页面不会滚动到顶部。

在此处输入图像描述

我的技能仅限于您在示例中看到的内容。 希望有人可以帮助我修复/改进这个...

    <!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        body::after {
          content: "";
          position: absolute;
          z-index: 99;
          background-color: rgba(0, 0, 0, 0.5);
          height: 100vh;
          width: 100vw;
          top:0;
          left:0;
          transition: 0.4s;
          opacity: 0;
          visibility: hidden;
        }
        #mm-btn div {
          width: 35px;
          height: 5px;
          background-color: black;
          margin: 6px 0;
          cursor: pointer;
        }
        .mm-drill {
          transform: translateX(100%);
          font-family: 'Poppins', sans-serif;
        }
        .mm-is-toggled .mm-drill {
          transform: translateX(0);
        }
        .mm-is-toggled::after {
          opacity: 1;
          visibility: visible;
        }
        .mm-drill {
          display: flex;
          position: fixed;
          z-index: 100;
          top: 0;
          right: 0;
          width: 100vw;
          height: 100vh;
          background-color: #fff;
          overflow-y: auto;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
          transition: 0.45s;
        }
        .mm-items {
          flex: 0 0 100%;
        }
        .mm-item:not(:last-child) {
        }
        .mm-link {
          display: block;
          padding: 20px 15px;
          background-color: red;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 500;
        }
        .mm-expand-content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: translateX(100%);
          background-color: #daf9f4;
          transition: 0.3s;
          visibility: hidden;
        }
        .mm-expand-content .mm-item:not(:last-child) {
        }
        .mm-expand-content .mm-link {
          background-color: #daf9f4;
        }
        .mm-expand-content .mm-back-link {
          display: flex;
          align-items: center;
          background-color: #daf9f4 !importnat;
          color: black;
        }
        .mm-expand-content .mm-back-link::before {
          content: "\276E";
          margin-right: 0.5rem;
        }
        .mm-expand-link {
          display: flex;
          justify-content: space-between;
        }
        .mm-expand-link::after {
          content: "\276F";
          flex: 0 1 auto;
          font-size: 1.2rem;
        }
        .mm-expand.active > .mm-expand-content {
          transform: translateX(0);
          visibility: visible;
        }
        .mm-expand .mm-expand-content {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-link {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content .mm-link {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content .mm-expand-content {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-link {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-expand-content {
          background-color: #f2f2f2;
        }
        .mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-expand-content .mm-link {
          background-color: #f2f2f2;
        }
        .mm-drill a {
          text-decoration: none;
        }
        .mm-drill ul, li {
          margin: 0;
          padding: 0;
          border: 0;
          vertical-align: baseline;
          list-style: none;
        }
        .mm-topbar{
        }
        .mm-logo{
          margin:20px 10px 10px 20px;
        }
        .mm-close {
          position: absolute;
          right: 30px;
          top: 20px;
          width: 25px;
          height: 25px;
          cursor: pointer;
        }
        .mm-close:hover {
          opacity: 1;
        }
        .mm-close:before, .mm-close:after {
          position: absolute;
          left: 15px;
          content: ' ';
          height: 25px;
          width: 5px;
          background-color: black;
        }
        .mm-close:before {
          transform: rotate(45deg);
        }
        .mm-close:after {
          transform: rotate(-45deg);
        }
        .mm-item {
          flex: 0 0 100%;
        }
        .mm-back-link{
          color:black;
          padding: 25px 0 0 25px;
        }
        .mm-headline {
          text-align: center;
          font-size: 1.1rem;
          margin-top:30px;
        }
        .mm-1st-btn{
          border:1px solid red;
          margin: 20px 20px 20px 20px;
          border-radius: 5px;
          font-size: 1rem;
          background-color: #f2f2f2;
          border: 1px solid #cbd6e2;
          box-shadow: 0 1px 24px rgba(45,62,80,0.12);
          color: black;
          padding-left: 20px;
          padding-right: 30px;
        }
        .mm-2nd-btn{
          border:1px solid red;
          margin: 20px 20px 20px 20px;
          border-radius: 5px;
          font-size: 1rem;
          background-color: #fff !important;
          border: 1px solid #cbd6e2;
          color: black;
          padding-left: 20px;
          padding-right: 30px;
        }
        .mm-cta-btn{
          margin: 40px 20px 15px 20px;
          border-radius: 5px;
          font-size: 1rem;
          background-color: #237fc2;
          text-align: center;
          color: #fff;
        }
        .mmsuperbtn{
        }
        .mmsuperdesc{
        }
      </style>
  </head>
  <body>
    <div id="mm-btn"><div></div><div></div><div></div></div>
    <nav class="mm-drill">
      <ul class="mm-items">
        <li class"mm-topbar">
          <div class="mm-logo"><img width="140" src="http://localhost:8888/docbox3/wp-content/uploads/2021/02/docbox_logo.svg">
          </img></div>
          <div class="mm-close"></div>
        </li>
        <li style="height:20px;"></li>
        <li class="mm-item mm-expand">
          <a class="mm-link mm-expand-link mm-1st-btn" href="#">
            Lösungen
          </a>
          <ul class="mm-items mm-expand-content">
            <li class="mm-item mm-headline">
                Lösungen
            </li>
            <li class="mm-item">
              <a class="mm-link  mm-2nd-btn" href="#">
                <div class="mmsuperbtn"><i class="fas fa-hospital" style="font-size:1.5rem"></i>&nbsp;&nbsp;Spital-Kommunikation</div><div class="mmsuperdesc">Elektronische Patienten-Anmeldung und Zuweisung »</div>
              </a>
            </li>
            <li class="mm-item">
              <a class="mm-link  mm-2nd-btn" href="#">
                <div class="mmsuperbtn"><i class="fas fa-flask" style="font-size:1.5rem"></i>&nbsp;&nbsp;Pharma-Kommunikation</div><div class="mmsuperdesc">Keine unerwünschten Walkins und gezielte Termine »</div>
              </a>
            </li>
            <li class="mm-item">
              <a class="mm-link  mm-2nd-btn" href="#">
                <div class="mmsuperbtn"><i class="fas fa-medkit" style="font-size:1.5rem"></i>&nbsp;&nbsp;Notfallsienst-Organisation</div><div class="mmsuperdesc">Organisation und Planung Ärztlicher Notfalldienste »</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="mm-item mm-expand">
          <a class="mm-link mm-expand-link mm-1st-btn" href="#">
            Ressourcen
          </a>
          <ul class="mm-items mm-expand-content">
            <li class="mm-item mm-headline">
                Ressourcen
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Kennenlernen
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Kennenlernen
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Übersicht aller Services
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Warum docbox?
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Kundenstimmen
                  </a>
                </li>
              </ul>
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Erste Schritte
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Erste Schritte
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Einen Account eröffnen
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Account einrichten
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Ich brauche Hilfe!
                  </a>
                </li>
              </ul>
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Wissenswertes
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Wissenswertes
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Webblog
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Schulungen & Webinare
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Fallstudien & Analysen
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Artikel & Whitepaper
                  </a>
                </li>
              </ul>
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Service
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Service
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Dienstleistung & Beratung
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Onboarding-Service
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Solutions-Partner
                  </a>
                </li>
              </ul>
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Support
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Support
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Wissensdatenbank
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Kundensupport
                  </a>
                </li>
              </ul>
            </li>
            <li class="mm-item mm-expand">
              <a class="mm-link mm-expand-link mm-2nd-btn" href="#">
                Partner & Entwickler
              </a>
              <ul class="mm-items mm-expand-content">
                <li class="mm-item mm-headline">
                    Ressourcen > Partner & Entwickler
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Partnerprogramme
                  </a>
                </li>
                <li class="mm-item">
                  <a class="mm-link mm-2nd-btn" href="#">
                    Entwickler-Tools
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="mm-item">
          <a class="mm-link mm-1st-btn" href="#">
            Warum docbox?
          </a>
        </li>
        <li class="mm-item mm-expand">
          <a class="mm-link mm-expand-link mm-1st-btn" href="#">
            Unternehmen
          </a>
          <ul class="mm-items mm-expand-content">
            <li class="mm-item mm-headline">
                Unternehmen
            </li>
            <li class="mm-item">
              <a class="mm-link mm-2nd-btn" href="#">
                Über uns
              </a>
            </li>
            <li class="mm-item">
              <a class="mm-link mm-2nd-btn" href="#">
                Karriere
              </a>
            </li>
            <li class="mm-item">
              <a class="mm-link mm-2nd-btn" href="#">
                Kontakt aufnahmen
              </a>
            </li>
            <li class="mm-item">
              <a class="mm-link mm-2nd-btn" href="#">
                Management Team
              </a>
            </li>
          </ul>
        </li>
        <li class="mm-item">
          <a class="mm-link mm-cta-btn" href="#">
            Anmelden
          </a>
        </li>
      </ul>
    </nav>
    <script>
      const navExpand = [].slice.call(document.querySelectorAll('.mm-expand'));
      const backLink = `<li class="mm-item"><a class="mm-link mm-back-link" style="width:100px;" href="javascript:;">BACK</a><div class="mm-close"></div></li>`;
      navExpand.forEach(item => {
        item.querySelector('.mm-expand-content').insertAdjacentHTML('afterbegin', backLink);
        item.querySelector('.mm-link').addEventListener('click', () => item.classList.add('active'));
        item.querySelector('.mm-back-link').addEventListener('click', () => item.classList.remove('active'));
      });
      const mmbtn = document.getElementById('mm-btn');
      mmbtn.addEventListener('click', function () {
        document.body.classList.toggle('mm-is-toggled');
      });
      const mmclose = document.querySelectorAll('.mm-close');
      mmclose.forEach(item => {
        item.addEventListener('click', event => {
          document.body.classList.toggle('mm-is-toggled');
        })
      })
    </script>
    source: https://codepen.io/tiffachoo/pen/yzZRXK#_=_
  </body>
</html>

希望的行为是：在全高的子菜单区域中显示背景颜色，按每个菜单层的高度定义最大高度，并在展开子菜单区域时滚动顶部。