html - 内容上方的滚动条

Question

在下面的代码中，我尝试使用 flexbox 显示模型构建类似表格的设计。

.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>

我的问题是，第二行(带有“大量内容”)是滚动条，滚动条占用了我的行单元格的空间，这是个大问题，因为我的列不具有相同的宽度而且它不看起来不像一张 table 。

我不能使用的东西:

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

Real world usage of component

因此，我需要使第二行的滚动条位于该内容之上，而不占用该空间。

Answer 1

我发现，存在 overflow: overlay ，它可以按我的意愿工作。

它呈现滚动条，但不占用空间

参见:demo