html – 滚动条高于内容

.wrapper {
    width: 500px;
    height: 150px;
    background: grey;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border: 3px solid green;
}
.cell {
    flex: 1;
    border: 1px solid red;
}

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row" style="overflow: auto;">
      <div class="cell">1</div>
      <div class="cell">
        <div style="height: 200px;">huge content</div>
      </div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
  </div>
</div>

我的问题是,在第二行(带有“巨大的内容”)是滚动条,并且滚动条占用了我的行单元格空间,这是一个很大的问题,因为我的列宽度不同,看起来不像一张桌子.

我不能用的东西：

>我自己实现的滚动条(性能是一个问题).
>固定宽度的列或.container(组件的高度和宽度必须适应).

Real world usage of component

所以,我需要让第二行中的滚动条高于该内容,而不是占用该空间.