JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="row header">
  </div>
  <div class="row content">
  </div>
  <div class="row footer">
  </div>
</div>

CSS

body {
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}


.box .row.header {
  flex: 0 1 50px;
  background-color: #0000ff;
}

.box .row.content {
  flex: 1 1 auto;
  width: 100%;
  background-color: #dc143c;
}

.box .row.footer {
  flex: 0 1 40px;
  background-color: #00008b;
}