JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myContainer">
  <div class="top">Top</div>
  <div class="middle"></div>
  <div class="bottom">Bottom</div>
</div>

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

CSS

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
  border-style: solid;
  border-width: 1px;
}

.top {
/*   flex: 0 1; */
  background-color: blue;
  color: white;
}

.middle {
  flex: 1 1;
}

.bottom {
/*   flex: 0 1; */
  background-color: red;
  color: white;
}

.filler {
  flex: 1 1;
}