JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex">
  <div class="flex-container">
    <p>Flex Container</p>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
  </div>
  <div class="block-container">
    <p>Block Container</p>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
    <div class="item1">Text</div>
    <div class="item2">Text</div>
    <div class="item3">Text</div>
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 600px;
  width: 400px;
}
.block-container {
  overflow-y: scroll;
  height: 600px;
  width: 400px;
  margin-left: 50px;
}
.item1, .item2, .item3 {
  flex: 1 0 200px;
}
.item1 {
  height: 200px;
  background-color: red;
  margin-bottom: 1px;
}
.item2 {
  height: 200px;
  background-color: green;
  margin-bottom: 1px;
}
.item3 {
  height: 200px;
  background-color: blue;
  margin-bottom: 1px;
}