滚动条上方的内容 [英] Scrollbar above content

问题描述

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

  .wrapper {width：500px; height：150px; background：gray;}。container {display：flex; flex-direction：列; height：100％;}。row {display：flex; flex-direction：row; flex：1; border：3px solid green;}。cell {flex：1; border：1px solid red;}  

< div class = 包装 > < div class =container> < div class =row> < div class =cell> 1< / div> < div class =cell> 2< / div> < div class =cell> 3< / div> < / DIV> < div class =rowstyle =overflow：auto;> < div class =cell> 1< / div> < div class =cell> < div style =height：200px;>巨大内容< / 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 （组件高度和宽度必须适应）。
>

组件的实际使用情况

所以，我需要让第二行的滚动条超出内容的范围，

解决方案

我发现存在 overflow：overlay 按我想要的方式工作。

它是仁ders滚动条，但不占用该空间

请参阅：演示

In the following code, I'm trying to build table like design with flexbox display model.

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

My problem is, that in second row (with that "huge content") is scrollbar, and that scrollbar is taking space from my row cells and that's huge problem because my columns don't have the same width and it doesn't look like a table.

Things I can't use:

• my own implementation of scrollbars (performance is an issue).
• fixed widths of columns or .container (components height and width has to adapt).

Real world usage of component

So, I need to make the scrollbar in the second row to be above that content and not to take that space.

解决方案

I found, that exists overflow: overlay , which works as I want.

It renders the scrollbar, but doesn't take that space

See: demo

这篇关于滚动条上方的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！