在模态窗口中滚动Div

Question

我正在尝试使用CSS重新设置模式窗口的样式。原始窗口如下所示：
并且我试图将左侧边栏菜单堆叠在窗口其余部分的上方，如下所示：
侧边栏菜单是关键所在。我将其修改为使用overflow:auto在逻辑分区内垂直滚动。它可以在Google Chrome Dev Tools模拟器上正常运行，但不能在智能手机上运行-菜单不会向上/向下滚动。

“ media-frame-menu”是“ media-menu”的父div。这是父级的CSS属性：

media-frame-menu {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  bottom: 0px;
  color: rgb(68, 68, 68);
  display: block;
  float: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  height: 128px;
  left: 0px;
  line-height: 18.2px;
  outline-color: rgb(68, 68, 68);
  outline-style: none;
  outline-width: 0px;
  position: absolute;
  top: 0px;
  user-select: none;
  visibility: hidden;
  width: 360px;
  z-index: 150;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

media-menu {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgb(239, 239, 244);
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat-x: ;
  background-repeat-y: ;
  background-size: auto;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right-color: rgb(204, 204, 204);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  bottom: 0px;
  color: rgb(68, 68, 68);
  display: block;
  float: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  height: 162.391px;
  left: 0px;
  line-height: 18.2px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  outline-color: rgb(68, 68, 68);
  outline-style: none;
  outline-width: 0px;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  user-select: none;
  visibility: hidden;
  width: 374px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

<div class="md-modal full-width md-dynamicmodal md-menu md-close-by-overlay md-register" id="modal-order_payment">
  <div class="media-frame-menu">
    <div class="media-menu">
      <a href="#acct" class="payment_methods payment_method_acct active" data-bind="acct">
        <input id="payment_method_acct" type="radio" class="select_payment_method" name="payment_method" value="acct" style="display: none;" checked="checked"> On Account payments </a>
      <a href="#cheque" class="payment_methods payment_method_cheque" data-bind="cheque">
        <input id="payment_method_cheque" type="radio" class="select_payment_method" name="payment_method" value="cheque" style="display: none;"> Check payments </a>
      <a href="#cod" class="payment_methods payment_method_cod" data-bind="cod">
        <input id="payment_method_cod" type="radio" class="select_payment_method" name="payment_method" value="cod" style="display: none;"> Cash on delivery </a>
      <a href="#paypal_pro_payflow" class="payment_methods payment_method_paypal_pro_payflow" data-bind="paypal_pro_payflow">
        <input id="payment_method_paypal_pro_payflow" type="radio" class="select_payment_method" name="payment_method" value="paypal_pro_payflow" style="display: none;"> Credit cards by PayPal </a>
      <a href="#ppec_paypal" class="payment_methods payment_method_ppec_paypal" data-bind="ppec_paypal">
        <input id="payment_method_ppec_paypal" type="radio" class="select_payment_method" name="payment_method" value="ppec_paypal" style="display: none;"> PayPal Checkout </a>
    </div>
  </div>

我知道我并不是理想地展示信息，但是希望能帮助您找到为什么在桌面环境而不是移动浏览器中能按预期显示的信息，对此我将不胜感激。我确实知道此示例中缺少大量的JS和CSS。只是希望以前有人遇到过这个问题。