滚动条高于内容

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>

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

我不能用的东西:

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

组件的实际使用情况

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

Answer 1

我发现,存在overflow: overlay,它按我的意愿运作.

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

见:demo

Answer 2

我想你正在寻找这个..

JSFIDDLE

使用的代码 -

::-webkit-scrollbar {
    width: 10px;
    height:10px;

}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); 
    border-radius: 6px;
    background-color: grey;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
    background-color: grey;
}