<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="aaa" style="width:2px;background-color: black;margin:0 20px;"></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: 400px;
  display: flex;
  overflow-x: auto;
  background-color: deeppink;
}

.bbb{
  flex-shrink: 0;
  width: 100px;
  border:3px solid firebrick;
  background-color: khaki;
}
.column-r{
  flex-direction: row-reverse;
}