<div class="flex-box">
  <div class="flex">
    <div class="bbb">1</div>
    <div class="bbb">2</div>
    <div class="bbb">3</div>
    <div class="bbb">4</div>
    <div class="bbb">5</div>
    <div class="bbb">6</div>
  </div>
  <div class="flex column-r">
    <div class="bbb">1</div>
    <div class="bbb">2</div>
    <div class="bbb">3</div>
    <div class="bbb">4</div>
    <div class="bbb">5</div>
    <div class="bbb">6</div>
  </div>
</div>
.flex-box{
  display: flex;
}
.flex{
  width: 400px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.bbb{
  flex-shrink: 0;
  height: 200px;
  border:3px solid firebrick;
  background-color: khaki;
}
.column-r{
  flex-direction: column-reverse;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.