JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
  <div id ="middle">
    <div id="bottom">
    
      <div>
      
        <div>  
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        
      </div>
      
    </div>
  </div>
</div>

CSS

#top {
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden !important;
  max-height: 25vh;
  max-width: 300px;
  border: 2px dashed #ec6161;
}
#middle {
  padding-right: 19px;
  margin-bottom: -34px;
  overflow: scroll;
  overflow-x: hidden !important;
  min-width: 100%! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}
#bottom {
  padding-bottom: 17px;
  margin-right: -19px;
  overflow: scroll;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eee;
  padding: 5px 7px;
  font-weight: bold;
}
.content {
  height: 100px;
  padding: 5px 7px;
}