JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div id="parent">
  <div class="shrinkable">Shrinkable</div>
  <div id="growable">
    <b>growable</b>
    <textarea></textarea>
  </div>
  <div class="shrinkable">Shrinkable</div>
  <div class="shrinkable">Shrinkable</div>
</div>

CSS

#parent {
  display: flex;
  flex-direction: column;
  height: 95vh;
  overflow: hidden;
}

#growable {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  //min-height: calc(95vh - 60vh); /* 60 = 20 * 3 */
}

.shrinkable {
  display: flex;
  flex: 1 1 20vh;
  border: dotted blue 1px;
}