In a react app, I dynamically create new components inside of a container. When the height of the container is exceeded by the newly created items, I want the container to become scrollable in the Y direction. I could not achieve the behavior by using overflow: 'auto'. Any suggestions?

sass:

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

The component:

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>

    </>

)

This is how it starts:

This is how it goes: