Как вынести горизонтальный скролл в родительский контейнер, оставив вертикальный скролл?

Question

[Анна]

Примерно такая структура ->

<div class='wrapper'>
  <div class='header'>{...}</div>
  <div class='body'>{...}</div>
</div>

Ссылка на песочницу

Мне нужно чтобы вертикальный скролл был в контейнере body, а горизонтальный во wrapper контейнере
Сейчас получается при добавлении вертикального скролла в body в нем автоматически появляется горизонтальный. При попытке скрыть горизонтальный скролл ( overflow-x: hidden ) body обрезается и горизонтальный скролл в родителе на него не срабатывает

Как можно такое реализовать ?

Если делать не на дивниках, а использовать табличные теги, то получается реализовать
Пример таблицы с желаемым поведением

Comments

[IvanU7n]

добавление width: min-content; для .body может помочь, но не это не точно
проблема в том, что столбцы таблицы связаны между собой, а дивы — нет

Answer 1

[Виктор]

так?

Comments

[Анна]

Спасибо!