JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:150px; background-color:red; border:7px solid maroon">
  A has FIXED height:150px
  <div id="innerDiv" 
       style="height:auto; background-color:yellow; border: 7px solid orange">
    B height: auto  (GROWS to accomodate its OWN content, including its CHILDREN's content)
    <div id="evenInner" 
         style="height:100px; background-color:LightBlue; border: 7px solid DarkBlue">
         C has FIXED HEIGHT<br>
         If The height of this container cannot fit all the text I have written <br>
         it will simply be CUT OFF (not be shown. <br>
         This box Will NOT GROW to accomodate. <br>
         BUT IF I change it to AUTO (or maybe some other values)<br>
         .. it will Grow to Accomodate all the text.
    </div>
    b (takes on height of child <br>
       PLUS the height it needs to display its own text
       )
  </div>
  a
</div>