React动态创建组件时实现容器垂直滚动的方案咨询

核心问题 #

overflow: auto要生效，容器必须有明确的高度限制（固定高度、最大高度，或从父级继承到有效高度）。你的代码里.v-timeline-container没有设置高度，父元素.v-timeline的height:100%如果没有上层容器的高度约束，会失效导致容器高度随内容撑开，自然不会触发滚动。

具体修复步骤 #

1. 给容器设置明确的高度上限
2. 移除子元素上多余的overflow: scroll（会导致每个项自己滚动，不是全局容器滚动）

修改后的Sass代码

.v-timeline{   // 父组件
    flex: 1;
    height: 100vh; // 绑定视口高度，确保父级有明确高度
    width: 100%;
    flex-wrap: nowrap;
    .v-timeline-container {   // 目标滚动容器
        height: calc(100% - 50px); // 减去按钮高度，避免遮挡
        overflow-y: auto; // 明确仅在Y轴方向滚动
        .v-timeline-indicator {
            z-index: 2;
            background-color: rgb(0, 105, 185);
            width: 3px;
            position: relative;
        }
        .v-timeline-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'>
            {
                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>
    </>
)

更灵活的布局方案（基于Flex） #

如果希望容器自动占据父级剩余空间，不需要手动计算高度，可以调整父级为垂直Flex布局：

.v-timeline{
    display: flex;
    flex-direction: column;
    height: 100vh;
    button {
        flex-shrink: 0; // 固定按钮高度，不被压缩
    }
    .v-timeline-container {
        flex: 1; // 自动占据剩余空间
        overflow-y: auto;
    }
}

对应的组件结构需要把按钮放到.v-timeline容器内，这样布局会更适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者ilketorun