JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  1 block
</div>

<div class="vh-100 flex-column">
  <header class="h-20">111</header>
  <main class="grow-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem!</main>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.block {
  height: 100px;
}

.vh-100 {
  height: 100vh;
}

.flex-column {
  display: flex;
}

.h-20 {
  height: 20%;
}

.grow-1 {
  flex-grow: 1;
}

header {
  background: #E1F5FE;
}

main {
  background: red;
}