Html 溢出：隐藏不工作，尽管绝对和相对

我关心的两个div容器是顶部的第二行和底部的第二行。包含文本的div是绝对定位的，它们之外的div是相对定位的。内部容器有溢出：隐藏，但它们不起作用，文本从中流出。有什么好办法吗

小提琴：

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>

您必须添加溢出：隐藏；限制父div大小的div，而不是内部具有完整高度的div

添加以下内容：

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

---

@斯密蒂：没问题。很高兴这有帮助。当你掌握了窍门时，这实际上是很合乎逻辑的。父div是您指定高度的div，实际上负责修剪内容。他们不会让内容溢出。

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