Почему не работает overflow-x у таблицы, если у родителя display: flex;?

Добрый день, коллеги.

Прошу помочь справиться с проблемой.

САБЖ: Есть несколько оберток, которые задают сетку сайта. Внутри main нужна таблица, которая при сужении экрана должна иметь скролл. Но скролл не ставиться! overflow-x - не отрабатывает!! Единственный вариант, который я вижу - display: flex; у родителя. Прошу, помогите справиться с этим.

https://codepen.io/emelyanova/pen/PBxyOq - код на поиграть.

Заранее благодарю.

/*прошу, не разводите хайпа...*/