<div class='container'>
  <div class='top'></div>
  <div class='middle percent'></div>
  <div class='bottom'></div>
</div>

<div class='container'>
  <div class='top'></div>
  <div class='middle zero'></div>
  <div class='bottom'></div>
</div>

.middle {
  overflow: auto;
  flex-grow: 1;
  flex-shrink: 1;
  
  background: #f99;
}
.percent {
  flex-basis: 0%;
}
.zero {
  flex-basis: 0;
}

.container {
  width: 200px;
  display: inline-flex;
  flex-direction: column;
  
  background: #99f;
}
.container > div::after {
  content: attr(class)
}