Tengo una aplicación de reacción y estoy dividiendo mi pantalla en dos como se muestra a continuación.

 <div className="App"> <div className="left"> {items.map((item) => ( <h4>{item}</h4> ))} </div> <div className="right"> {products.map((product) => ( <span>{product}</span> ))} </div> </div>

En el lado izquierdo, estoy mostrando una lista de etiquetas h4 mientras mapeo a través de una lista y la muestro como una row . En el lado derecho, estoy mostrando una lista de productos como column .

El estilo está abajo.

 .App { height: 100%; width: 100%; background-color: aquamarine; display: flex; } .left { width: 50%; background-color: red; display: flex; flex-direction: row; overflow: hidden; } .left h4 { padding-right: 1rem; } .right { width: 50%; display: flex; flex-direction: column; }

Actualmente, la lista de elementos se está desbordando y lo que quiero es mostrar los elementos desbordados como una dropdownlist cuando nos desplazamos hasta el final del div izquierdo.

¿Hay una manera de hacer eso?

El codesandbox está debajo

https://codesandbox.io/s/fervent-raman-0rywqt?file=/src/styles.css:0-304