En una aplicación de reacción, creo dinámicamente nuevos componentes dentro de un contenedor. Cuando los elementos recién creados superan la altura del contenedor, quiero que el contenedor se pueda desplazar en la dirección Y. No pude lograr el comportamiento usando overflow: 'auto' . ¿Alguna sugerencia?

hablar con descaro a:

 .v-timeline{ // parent component flex: 1; height: 100%; width: 100%; flex-wrap: nowrap; .v-timeline-container { // this is our container .v-timeline-indicator { z-index: 2; background-color: rgb(0, 105, 185); width: 3px; position: relative; } .v-timeline-items { // these are the new items .v-timeline-item { height: 60px; } } } }

El componente:

 const [gridItems, setGridItems] = useState([{ id: 'firstItemID', info: 'firstItemInfo'}]); const addRow = () => { setGridItems([ ...gridItems, { id: uuidv4() , info: 'doesnt matter' } ]); } return ( <> <button onClick={addRow}>Add Row</button> <div className='v-timeline-container' style={{ overflow: 'auto'}} > { gridItems.map(item => ( <div id={`thisTimeline${item.id}`} style={{ display: 'flex', overflow: 'scroll'}} key={`thisItem${item.id}`} className="v-timeline-items v-border"> <Indicator id={item.id} height={60}/> <div> <CustomItemContainer id={item.id} info={item.info}/> </div> </div> )) } </div> </> )

Asi es como empieza:

Así es como va: