JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <div class="page">
    <div class="sidebar">
      <div class="top">
      top
      </div>
      <div class="bottom">
        <div class="filler-content">
          bottom
        </div>
      </div>
    </div>
  </body>
</div>
</html>

CSS

.page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: $menu-height 0 0 0;
  box-sizing: border-box;
}

.sidebar {
  width: 500px;
  float: left;
  height: 100%;
  box-sizing: border-box;
  background: #ddd;
  border-right: 1px solid red;
  display: flex; /* Added */
  flex-direction: column; /* Added */
}

.top {
  height: 200px;
  background: #eee;
}
.bottom {
  flex: 1; /* Added */
  background: #ccc;
  overflow-y: auto;
}

.filler-content {
}