JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
        <p>Inner</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS

#outer {
    background: #ff0000;
    display: -ms-flexbox !important;      /* TWEENER - IE 10 */
    min-height: 100vh;
 
    -ms-flex-direction: column;
    height: auto !important;
    -ms-flex-align: stretch;
}

#inner {
    -ms-flex-align: stretch;
    background: #00ff00; 
    width: 100%;              /* For old syntax, otherwise collapses. */ 
    -ms-flex: 1 0 auto;              /* IE 10 */
}

#footer {
    -ms-flex: 0 0 auto;
    -ms-flex-align: end;
    background: #0000ff;
    padding: 30px;
}