JSFiddle - React, Tailwind, and code Playground

by AurumPotabile

HTML

<!-- Shrink the height of the Result pane to show a scrollbar when content overflows.
     This approach allows the navigation bar to remain at the top of the page and the 
     main content area to dynamically fill the page vertically. -->
<div id="fullList">
  <div id="flexArea">
    <div id="navList"><a href="#letterA">A</a> | <a href="#letterB">B</a> | <a href="#letterC">C</a> | <a href="#letterD">D</a></div>
    <div id="dbList">
      <a name="letterA">A</a>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <a name="letterB">B</a>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <a name="letterC">C</a>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <a name="letterD">D</a>
      <p>This is my div. There are many like it, but this one is mine.</p>
      <p>This is my div. There are many like it, but this one is mine.</p>
    </div>
  </div>
</div>

CSS

#fullList {
  position: absolute;
  height: 97%;
  width: 97%;
  display: flex;
  flex-direction: column;
}

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

#dbList {
  flex-grow: 1;
  overflow: auto;
  background-color: aqua;
  height: 100%; /* Necessary for IE */
}

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