Полоса прокрутки выше содержимого

В следующем коде я пытаюсь создать таблицу, подобную дизайну, с моделью отображения flexbox.

Моя проблема в том, что во второй строке (с этим «огромным контентом») есть полоса прокрутки, и эта полоса прокрутки занимает пространство из моих ячеек строк, и это огромная проблема, потому что мои столбцы не имеют одинаковой ширины, и это не похоже на стол.

Вещи, которые я не могу использовать:

  • моя собственная реализация полос прокрутки (производительность – проблема).
  • фиксированная ширина столбцов или .container (компоненты высоты и ширины должны адаптироваться).

Использование компонента в реальном мире

Итак, мне нужно, чтобы полоса прокрутки во второй строке была выше этого содержимого и не занимала это пространство.

Я обнаружил, что существует overflow: overlay , которое работает так, как я хочу.

Он отображает полосу прокрутки, но не занимает это пространство

Смотрите: демо

Я думаю, вы ищете это.

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