Überlauf: Versteckt funktioniert nicht trotz Absolute und Relative

Question

Die zwei div Container, die ich betroffen bin, sind die "Top Secondary" und "Bottom Secondary" Reihen. Die divs, die den Text enthalten, sind absolut positioniert, und die divs außerhalb von ihnen sind relativ positioniert. Der innere Container hat einen Überlauf: versteckt, aber sie verhalten sich nicht, Text fließt trotzdem aus ihnen heraus. Irgendwelche Ideen, um zu helfen?

Fiddle: https://jsfiddle.net/4uqqgvzx/2/

HTML-Code:

<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 Stil:

.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

Sie haben die overflow: hidden; den divs hinzuzufügen, die die Größe begrenzen (die Mutter divs) nicht die innen mit der ganzen Höhe.

hinzufügen:

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