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（组件的高度和宽度必须适应）。

Real world usage of component

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

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;
}

滚动条高于内容

2 个答案: