JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="flexible">
    <div>1content</div>
    <div>2content</div>
    <div>3content</div>
  </div>
  <div id="popup">
    <div>1popup</div>
    <div>2popup</div>
    <div>3popup</div>
    <div>4popup</div>
    <div>5popup</div>
  </div>
  <div id="footer">
    <div>footer</div>
  </div>
</div>

CSS

div {
  color: #ffffff;
}

#container {
  height: 600px;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
}

#flexible {
  background-color: red;
  display: flex;
  flex: 1;
  flex-flow: column wrap;
}

#popup {
  background-color: #cccccc;
}

#footer {
  background-color: #666666;
}