Why doesn't overflow-x work on a table if the parent has display: flex;?

Question

css

Good afternoon, colleagues.
Please help me to solve the problem.
SUBJECT: There are several wrappers that define the grid of the site. Inside main, we need a table that, when the screen narrows, should have a scroll. But do not put the scroll! overflow-x - doesn't work!! The only option I see is display: flex; at the parent. Please help me deal with this.
https://codepen.io/emelyanova/pen/PBxyOq - code to play.
Thank you in advance.
/*please don't spread hype...*/

Answer 1

ANSWER: Set overflow: auto; on the wrapper.