JSFiddle - React, Tailwind, and code Playground

HTML

<div class="simulate">
  &nbsp;
</div>
<ul class="list">
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
  <li class="item">Foo</li>
  <li class="item">Bar</li>
</ul>

CSS

html, body{
  margin: 0;
  padding: 0;
}

.simulate {
  height: 50px;
  width: 100%;
  background-color: grey;
}

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50px;
  left: 0;
  overflow-y: scroll;
  height: calc(100vh - 50px);
  margin: 0;
}

.item {
  border: 1px solid black;
  min-height: 50px;
  min-width: 100px;
}