JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexArea">
  <div id="navList">A | B | C | D</div>
  <div id="dbList">This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine.</div>
</div>

CSS

html, body {
  height: 97%;
}

.flexArea {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#navList {
  text-align: center;
  padding: 10px 0;
  background-color: red;
}

#dbList {
  flex-grow: 1;
  overflow: auto;
  background-color: aqua;
}