JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>
</body>

CSS

html {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%;
}
body {
  position: relative;
  min-height: 100%;
  background: gray;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid red;
}
#Main {
  height: 100%;
  width: 50%;
  margin: 0px auto;
  background: white;
}