溢出：尽管绝对和相对，隐藏不起作用

Question

我关心的两个div容器是“Top Secondary”和“Bottom Secondary”行。包含文本的div绝对定位，并且其外部的div相对定位。内部容器有溢出：隐藏，但他们不行为，文本不管他们流出。任何想法帮助？

小提琴：https://jsfiddle.net/4uqqgvzx/2/

HTML代码：

<div class="container-fluid maxWidthHeight"> 
    <div class="row topRow"> 
     <div class="col-md-12 noOverflow"> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
      Top Secondary<br/> 
     </div> 
    </div> 

    <div class="row middleRow"> 

     <div class="col-sm-3 leftCol noOverflowScroll"> 
      Left Secondary 
     </div> 

     <div class="col-sm-6 middleCol">   

      <div class="row primaryRow"> 
       <div class="col-md-12 primaryCol noPadding"> 

        <div class="row headerRow"> 
         <div class="col-md-12"> 
          Header 
         </div> 
        </div> 

        <div class="row contentRow"> 
         <div class="col-md-12 contentCol noPadding"> 

          <div class="row contentParent"> 

           <div class="col-sm-3 left1 noPadding noOverflowScroll"> 
            Left 
           </div> 
           <div class="col-sm-9 right1 noPadding noOverflowScroll"> 
            Right 
           </div> 

           <div class="overlay noOverflowScroll"> 
            Overlay 
           </div> 

          </div>     

         </div> 
        </div> 

        <div class="row footerRow"> 
         <div class="col-md-12"> 
          Footer 
         </div> 
        </div> 

       </div> 
      </div>   

     </div> 
     <div class="col-sm-3 rightCol noOverflowScroll"> 
      Right Secondary 
     </div> 

    </div> 

    <div class="row bottomRow" > 
     <div class="col-md-12 noOverflow">  
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
      Bottom Secondary<br/> 
     </div> 
    </div> 

</div> 

CSS样式：

.maxWidthHeight { 
    width: 100vw; 
    height: 91vh; 
    background-color: blue; 
} 

.topRow { 
    height: 10%; 
    position: relative; 
    background-color: green; 
} 

.middleRow { 
    height: 90%; 
    position: relative; 
    background-color: red; 
} 

.bottomRow { 
    height: 10%; 
    position: relative; 
    background-color: yellow; 
} 

.leftCol { 
    height: 100%; 
    background-color: orange; 
} 

.rightCol { 
    height: 100%; 
    background-color: purple; 
} 

.middleCol{ 
    height: 100%; 
    background-color: grey; 
} 

.primaryRow { 
    height: 100%; 
} 

.primaryCol { 
    height: 100%; 
} 

.headerRow { 
    height: 10%; 
} 

.contentRow { 
    height: 85%; 
} 

.contentCol { 
    height: 100% 
} 

.footerRow { 
    height: 5%; 
} 

.contentParent{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

.left1 { 
    float: left; 
    background-color: red; 
    height: 100%; 
} 

.right1 { 
    float: right; 
    background-color: blue; 
    height: 100%; 
} 

.overlay { 
    background-color: black; 
    color: white; 
    float: right; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 50%; 
    display: none; 
} 

.noPadding { 
    padding-right: 0 !important; 
} 

.noOverflow { 
    overflow: hidden; 
    position: absolute; 
} 

.noOverflowScroll { 
    overflow: hidden; 
    overflow-y: auto; 
} 

Answer 1

你必须在overflow: hidden;添加到被限制大小的div（父的div） ，而不是完整身高的人。

补充一点：

.topRow, 
.middleRow, 
.bottomRow { 
    overflow: hidden; 
}