JSFiddle - React, Tailwind, and code Playground

HTML

How to have a header/content/footer inside a particular div?
<div id="main">
    <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow</div>
    <div style="background-color:khaki;" class="content">
      <div>Content - height is variable. There could be a lot of content here so its overflow should be auto.<br/>
          </div>
    </div>
  <div style="background-color:pink;" class="footer">Footer</div>
</div>

CSS

#main {
    width: 300px;
    height: 250px;
    border: 1px solid #c3c3c3;

  /*  display: flex;
    display: -webkit-flex;*/

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-flex-direction: column;
    flex-direction: column;
}
.header,
.footer {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.content {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow:auto
}

JavaScript

// If possible I want to do it without js