JSFiddle - React, Tailwind, and code Playground

HTML

<div id="snippet-container">
      <div id="page">
        <div id="content">
          <div class="test"></div>
        </div>
        <div id="footer"></div>
      </div>
    </div>

CSS

#snippet-container {
      height: 300px;
      width: 200px;
    }

    #page {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    #content {
      flex: 1 1 auto;
      background: blue;
      display: flex;
      flex-direction: column; 

      
    }

    #content .test {
      background: yellow;
      border: 2px solid red;
      flex-grow: 1;
    }

    #footer {
      flex: 0 1 10vh;
      background: black;
    }