Javascript 如何溢出：动态创建组件的滚动

在Reaction应用程序中，我在容器中动态创建新组件.当新创建的项超过容器的高度时，我希望容器可以在Y方向滚动.我不能用overflow: 'auto'来实现这个行为.有什么建议吗？

萨斯:

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

该组件:

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>

    </>

)

事情是这样开始的:

事情是这样发展的: