JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<div class="outer">
  <div class="menu">
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
  </div>
  <div id="this" class="should_fill_available_space">
    Brown color should go all the way down
  </div>
</div>

CSS

div{
  padding: 0px
}
html, body{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.outer {
  display: flex;
  flex-direction: column;
  background: black;
  height: 100%;
}
.menu{
  background: orange;
  
}
.should_fill_available_space{
  flex: 1;
  background: brown;
  
}