Overflow: Hidden not working despite Absolute and Relative

Question

The two div containers that I am concerned with are the "Top Secondary" and "Bottom Secondary" rows. The divs containing the text are positioned absolutely, and the divs outside them are positioned relatively. The inner container has overflow: hidden, but they don't behave, text flows out of them regardless. Any ideas to help?

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

.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

You have to add the overflow: hidden; to the divs that are limiting the size (the parent divs), not the ones inside with the complete height.

Add this:

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