Scrollbar above content

问题

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.

回答1:

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

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

See: demo

回答2:

I think you are looking for this..

JSFIDDLE

Code used -

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

来源：https://stackoverflow.com/questions/24671317/scrollbar-above-content

标签

html

css

scrollbar