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.