JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div class="viewport">
  <div class="long-list">
    <div class='scrollerable-div'>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class='flex-item'></div>
      <div class='flex-item'></div>
      <div class='flex-item'></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

  </div>
  <div class="outer-item"></div>
  <div class="outer-item"></div>
  <div class="outer-item"></div>
  <div class="outer-item"></div>
  <div class="outer-item"></div>
</div>

CSS

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

* {
  box-sizing: border-box;
}

.viewport {
  height: 100vh;
  background-color: black;
overflow-x: hidden;
  overflow-y: scroll;
}

.long-list {
  display: flex;
  flex-direction: column;
  max-height: 100%;
/*   overflow-x: hidden;
  overflow-y: scroll; */
}
.scrollerable-div {
  display:block;
/*   height: fit-content;
  display: flex;
  flex-direction: column; */
}
.item {
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
  background-color: tomato;
}

.outer-item{
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
  background-color: green;
}

.flex-item {
  height: 100px;
  /* min-height: 100px; */
  width: 100%;
  display: flex;
  margin-bottom: 1rem;
  background-color: cyan;
}