Overflow flex column child

Question

I'm struggling with problem of overflow flex child content in flex with flex direction column. I need to get scroll for flex child when it overflows with content. Everything is ok when my window size more than 1200px cause flex direction is row. But when screen is less than 1200px I switch flex direction to column and when content overflows flex child sections get inequal height.

My markup:

.wrapper {
  height: 400px;
  border: 1px solid red;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.row, .d-flex {
  display: flex;
}

.row {
  @media screen and (max-width: 1199px) {
    flex-direction: column;
  }
}

.row > * {
  flex: 1;
}

.col {
  padding: 8px;
  background-color: rgba(234, 12, 88, 0.25);
  border: 1px solid rgba(4, 222, 188, 1);
  overflow: layout;
}

.hidden {
  overflow: hidden;
}

.auto {
  overflow: auto;
}

.tall {
  background-color: rgba(188, 255, 10, 0.23);
  height: 600px;
}

<div class="wrapper">
  <div class="row h-100">
    <div class="col col-1 d-flex">
      <div class="auto w-100">
        <div class="tall">1</div>
      </div>
    </div>
    <div class="col col-2">2</div>
    <div class="col col-3">3</div>
  </div>
</div>

One of possible solutions is to add overflow: hidden to .col-1 which has overflow content, but I need to solve it without.

Is it possible to get scroll on flex column child when it overflows without overflow: hidden on flex item ?

https://codepen.io/ChatduChesire/pen/ZEQPWrQ?editors=1100

Thank you!