title: text overflows its parent div
body: <p>I have a layout with 4 horizontally positioned div's like that: 
  <a href="https://i.stack.imgur.com/dYnDJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dYnDJ.png" alt="enter image description here"></a></p>
  
  <p>Now, when I add text and resize it with <a href="https://github.com/DanielHoffmann/jquery-bigtext/" rel="nofollow noreferrer">big text</a> to the light green div it expands somehow in a strange way (screenshot made on chrome): </p>
  
  <p><a href="https://i.stack.imgur.com/yiESa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yiESa.png" alt="enter image description here"></a></p>
  
  <p>Why is the text overflowing its parent?</p>
  
  <p>I need the div's to stay fixed in their size. 
  How can I achieve that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="textContentContainer"&gt;
      &lt;div class="FirstSectionRow1 uppercase"&gt;
          &lt;span class="FirstSectionHeaderText"&gt;SOME HEADER TEXT&lt;/span&gt;
      &lt;/div&gt;
      
      &lt;div class="FirstSectionRow2"&gt;&lt;/div&gt;
      
      &lt;div class="FirstSectionRow3"&gt;
          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.
      &lt;/div&gt;
      
      &lt;div class="FirstSectionRow4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>