JSFiddle - React, Tailwind, and code Playground

by Joel Parks

HTML

<div id="outer">
  <div id="inner_fixed">
    I have a fixed height
  </div>

  <div id="inner_remaining">
    I take up the remaining height
  </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#inner_fixed {
  height: 100px;
  background-color: grey;
}

#inner_remaining {
  background-color: #DDDDDD;
  flex-grow : 1;
}