固定外部容器，实现内部容器滚动的布局问题求助

你的问题出在内容容器的高度设置上——用min-height:75%没法准确计算标题和下拉菜单占用空间后的剩余高度，导致内容容器要么高度不足，要么超出外部容器范围，最终滚动条无法正常工作。

直接用Flex布局就能完美解决，调整CSS如下：

.demo__wrapper {
    position: relative;
    height: 50vh;
    /* 开启垂直方向的flex布局 */
    display: flex;
    flex-direction: column;
}

.demo__content--container {
    /* 让内容容器占据外部容器的剩余垂直空间 */
    flex: 1;
    /* 内容超出时显示垂直滚动条 */
    overflow-y: auto;
    /* 可选：加内边距优化视觉效果 */
    padding: 0 1rem;
}

JSX部分无需修改：

export function typingDemo() {
return (
<div className="demo__wrapper">
    <Title />
    <DropdownMenu />
    <div className="demo__content--container">
        <Content />
    </div>
</div>
);
}

原理说明 #

• 外部容器设置display: flex; flex-direction: column后，标题和下拉菜单会自动占据自身高度，剩余空间全部分配给内容容器。
• flex:1确保内容容器填满剩余空间，既不会被挤压也不会超出外部容器边界。
• 此时给内容容器加overflow-y:auto，当内容高度超过容器时就会出现滚动条，外部容器因高度固定且未设置overflow，完全不会滚动。

如果需要给内容容器设置最小高度，直接添加min-height即可，flex布局会自动适配，不会破坏整体结构。

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