始终显示 div 的水平滚动

Question

这是我现在为我的代码 (ReactJS) 使用的基本模板，精简为我的问题所需的内容。这是 Code Sandbox.

<div style={{maxHeight: "500px", overflowY: "auto"}}>
  <pre>
    <code>
     //bunch of code to display on UI
    </code>
  </pre>
</div>

除底部以外的任何位置都没有水平滚动条:

水平滚动条只有当我向下滚动到底部时才会显示 div:

如何让水平滚动条始终显示在 div 上，而不必一直向下滚动（并且当我向下滚动到底部）？

编辑： 想通了：

.App pre {
  overflow-x: visible !important;
}

Answer 1

将overflowY: "auto"更改为overflowY:"scroll"

Answer 2

我自己想出了办法。添加这个解决了这个问题。检查 Code Sandbox.

.App pre {
  overflow-x: visible !important;
}

Always show horizontal scroll for div