Scrollbar above content

Question

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.

Answer 1

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

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

See: demo

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