JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="parent">
          <div id="child">
              <p>This area should have the same height as it's parent.</p>
           </div>
        </div>
    </body>
</html>

CSS

html, body, header, h1, p { margin: 0; padding: 0; }

html         { background-color: #DDD; height: 100%; }
body         { background-color: #DAA; height: 100%; }

#parent {
  min-height: 70%;
  height: auto !important;
  height: 70%;
    
  background-color: #AAD;
}

#child {
  height: 100%; /* why isn't this working ? */
  

  width: 80%;
  margin: auto;    
  background-color: #ADA;
}