Bootstrap5嵌套Div滚动问题：内容增多导致容器高度超出

问题场景 #

使用React+Bootstrap5构建聊天UI，初始布局正常，但当聊天容器（.cp-chat-container）添加大量内容后，虽然出现了滚动条，但容器高度超出了预设的h-75比例，导致整体布局错乱。

原因分析 #

Bootstrap的h-*类是基于父元素高度设置固定百分比高度，但当容器内内容过多时，浏览器默认布局行为可能会让容器被内容撑开，打破预设的高度比例——即便设置了overflow-auto，也无法完全约束容器高度不超出父元素的比例范围。

解决方案 #

改用Bootstrap的Flex布局来约束子容器的高度分配，这是处理此类比例布局更可靠的方式：

1. 给左侧父容器（.cp-left-section）添加d-flex flex-column类，使其成为垂直方向的Flex容器；
2. 将聊天容器的h-75替换为flex-grow-1，让它自动占据输入区域之外的所有可用空间；
3. 保留聊天容器的overflow-auto，确保内容过多时显示滚动条。

修改后的代码如下：

import RootContainer from "../component/RootContainer";

export default function ChatPage() {
    return (
        <div className="cp-root-container container bg-primary h-100">
            <div className="row p-2 h-100">
                <div className="cp-left-section col-8 bg-secondary h-100 d-flex flex-column">
                     <div className="cp-chat-container bg-success flex-grow-1 overflow-auto">
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                        <h3>Test</h3>
                    </div>
                    <div className="cp-input-section bg-danger">
                    </div>
                </div>
                <div className="cp-right-section col-4 bg-dark">
                </div>
            </div>
        </div>
    );
}

补充说明 #

• Flex布局的flex-grow-1会让聊天容器优先占据父容器的可用垂直空间，输入区域则会自适应自身高度（也可给它设置固定高度）；
• 确保所有层级的父容器都设置了明确的高度（如h-100），为Flex布局提供可靠的高度上下文；
• 无需再依赖h-75和h-25这类固定百分比类，Flex布局会自动维持布局比例，不会因内容过多而错乱。

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