Here's the basic template I have right now for my code (ReactJS), stripped down to what's required for my question. Here's a Code Sandbox.

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

At any position other that at the bottom, the horizontal scroll bar is not there:

The horizontal scroll bar only shows when I scroll down to the bottom of the div:

How do I get a successfully working horizontal scroll bar to always show on the div, without having to scroll all the way down (and also remove the scroll bar that currently exists when I scroll down to the bottom)?

Edit: Figured it out:

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