嵌套的 DIVS 不会“看到”溢出内容

Question

好的，所以我正在尝试为网站制作一个导航栏，但是有很多链接 - 以至于在移动设备上你需要能够滚动。问题是它看不到中间 div 的其余内容。

设置如下：

HTML：

<div class="nav-link-holder inactive">
 <div class="nav-link nav-link-style" data-target="category-div-1">TITLE OF LINK</div>
 <div class="nav-div inactive" id="category-div-1">
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
  </div> <!--closes NAV-DIV -->
  <div class="nav-link nav-link-style" data-target="category-div-2">TITLE OF LINK</div>
  <div class="nav-div inactive" id="category-div-2">
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
   <div class="list-group">
     <div class="list">LIST OF LINKS</div>
   </div>
  </div> <!--closes NAV-DIV -->
</div> <!-- closes the holder -->

这么多嵌套 div 的问题在于，当一个 div 溢出另一个时，它看不到内容。所以如果“LIST OF LINKS”的组合内容长于设备高度，则需要能够向下滚动。我可以用 css 在 nav-div 上显示一个滚动条，但它不是活动的，所以我认为它看不到内容。

CSS：

.nav-link-holder {
   width: 100%;
   position: fixed;
   top: 60px;
   left: 0;
   padding: 0;
   margin: 0;
   z-index: 8100;
}
.nav-link-style {
   display: inline-block;
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   text-align: center;
   background-color: rgba(0, 0, 0, .9);
   cursor: pointer;
   font-size: 15px;
   padding: 0 !important;
   z-index: 8100;
}
.nav-div {
   width: 100%;
   position: relative;
   padding: 5px 0 10px 0;
   margin: 0;
   background-color: rgba(0, 0, 0, .9);
   overflow-y: scroll;
   text-align: center;
   z-index: 8500;
}
.list-group {
    width: 100%;
    height: auto;
    position: relative;
    margin: auto;
    text-align: center;
}

.list {
    width: 300px;
    position: relative;
    height: auto;
    padding: 5px 15px 15px 15px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

所有具有数据目标的 div 都是使用 javascript 扩展 nav-div 的链接，该 javascript 添加了一个活动和非活动类（仅影响显示属性）。当 nav-div 在移动设备上展开时，它对于高度来说太长了。当内部 div 超过“持有人”高度时，如何让它滚动 nav-div 容器？ 这是我作为初稿使用的代码笔 - 当您单击“类别 1”并将 with 减小到小于 400 像素时，它会出现同样的问题：http://codepen.io/ebevers/pen/PqybBb

Answer 1

我需要添加 overflow-y: 滚动到导致溢出的 div 的父级 - 在本例中是列表组 div。