JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

  <div id="content">
    <p>
    This DIV should stretch to 100% height of its parent and body 
    minus the 30px margin around and resize as the window is resized.<br />
    It's working in width but not in height!<br /><br />
    Whatever goes in here (a child DIV) no matter its size should not be 
    visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
    
    </p>
  </div>

</div>

CSS

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

html, body {
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: default;
}

#wrapper {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  position: absolute;
  background: #333;
  text-align: center;
}

#content {
  /*width: 100%;*/
  position:absolute;
  min-height: 90%;
  height: auto !important;
  margin: 4%;
  overflow: hidden;
  background: #ccc;
}