JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mainContainer'>
    <div id='mainContent'>Why doesn't this stretch to bottom?</div>
</div>

CSS

html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }

        #mainContainer {
            width: 100%;
            padding: 0px;
            background-color: #EEEEEE;
            height: 100%;
    min-height: 100%;
        }

        #mainContent {
/*            width: 800px;*/
            margin: 0px auto 0px auto;
         /*   padding: 100px 50px 50px 50px;*/
            background-color: #FFFFCC;
            min-height: 100%;
        }