多个水平滚动条而不是底部的一个

Question

我有一个很长的水平视图（不适合移动设备，非常具体的需求）。在小屏幕上，应该出现一个水平滚动条。目前，在下面的示例中，我有 3 个位于包含溢出部分的每个 <div> 处。

https://codepen.io/goozfraba/pen/eYdyzmL

我想要的是在最底部只有一个滚动条（如果我可以说是“经典”水平滚动条）。我怎样才能做到这一点？

仅供参考：它来自使用 Material-UI 与 vanilla CSS Grid 组合的 React 应用程序。这是一个概念证明，不要用所有的内联 css 来评判我 ;)