如何实现HTML表格水平滚动且避免撑破父容器？

我一直被这个问题困扰：尝试通过隐藏父容器的溢出内容来裁剪表格内容，并为表格容器设置overflow-x scroll以实现表格的水平滚动，但带有绿色背景的表格容器（.scrollable-table）始终超出父元素#panel的范围。

编辑补充
后来我尝试用flex-grow让外层面板占满全部宽度，当把表格设置为display none时，父容器的宽度显示正常，现在可以确定是表格本身破坏了布局。

内容的提问来源于stack exchange，提问作者Le Moi