文本溢出其父div

Question

我有一个布局，其中有4个水平定位的div：

现在，当我添加文本并使用big text将其调整为浅绿色div时，它会以某种奇怪的方式展开（在chrome上制作屏幕截图）：

为什么文本溢出其父文件？

我需要div来保持其大小。 我怎样才能做到这一点？

    .textContentContainer{
        width: 100%;
        height: 100%;
        background-color: aqua;
        position:relative;
    }
    
    .FirstSectionRow1 {
        width:100%;
        height:10%;
        background-color: blueviolet;
    }
    
    .FirstSectionRow2 {
        width: 100%;
        height: 10%;
        background-color:darkslategrey;
    }
    
    .FirstSectionRow3 {
        width: 100%;
        height: 70%;
        background-color: darkcyan;
        overflow: hidden;
        font-size:1.2vh;
    }
    
    .FirstSectionRow4 {
        height:10%;
        width: 100%;
        background-color: darkorchid;
    }

<div class="textContentContainer">
    <div class="FirstSectionRow1 uppercase">
        <span class="FirstSectionHeaderText">SOME HEADER TEXT</span>
    </div>
    
    <div class="FirstSectionRow2"></div>
    
    <div class="FirstSectionRow3">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet.
    </div>
    
    <div class="FirstSectionRow4"></div>
</div>