Always show horizontal scroll for div-CodePudding

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

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;
}

CodePudding user response：

change overflowY: "auto" to overflowY:"scroll"

CodePudding user response：

I figured out how to do it myself. Adding this fixed the problem. Check Code Sandbox.

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