Aquí está la plantilla básica que tengo ahora mismo para mi código (ReactJS), reducida a lo que se requiere para mi pregunta. Aquí hay un Code Sandbox .

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

En cualquier posición que no sea en la parte inferior, la barra de desplazamiento horizontal no está allí:

La barra de desplazamiento horizontal solo se muestra cuando me desplazo hacia abajo hasta la parte inferior del div:

¿Cómo puedo obtener una barra de desplazamiento horizontal que funcione correctamente para que siempre se muestre en el div, sin tener que desplazarme completamente hacia abajo (y también eliminar la barra de desplazamiento que existe actualmente cuando me desplazo hacia abajo)?

Editar: Lo descubrí:

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