固定高度父容器下的div无法滚动问题解决求助

你当前的消息容器已添加overflow-auto，但因缺少固定高度约束导致滚动未生效。结合Bootstrap布局，调整方案如下：

核心修改 #

• 给#Messages容器添加flex-grow-1类，让它在RightBox的flex布局中自动占据除输入栏外的所有可用空间
• 确保父容器的h-100约束生效（需外层容器也有明确高度，比如给html和body加h-100类）

修改后的完整代码 #

<div class="col-12 col-md-8 px-0 h-100">
    <div id="RightBox" class="d-flex flex-column h-100">
        <!-- 添加flex-grow-1，让消息容器填充剩余空间 -->
        <div id="Messages" class="d-flex flex-column justify-content-end overflow-auto px-2 py-1 flex-grow-1">
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">5</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">lmlml</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">qzdqz</p></div>
            <div><p class="float-end px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Melih</p></div>
            <div><p class="float-end px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Kek</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Yo Im a seller</p></div>
            <div><p class="float-end px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Ik ben een customer</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Aangenaam ik ben een seller genaamd gucci</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">yoyo</p></div>
            <div><p class="float-start px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Hallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abou</p></div>
            <div><p class="float-end px-2 py-1 mb-2 border rounded" style="max-width: 75%;">qzdqzdqzdqzdqzd</p></div>
            <div><p class="float-end px-2 py-1 mb-2 border rounded" style="max-width: 75%;">Hallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abouHallo ik ben Melih en ik leef in belgie Id wtf you are talking about wtf you are talking about wtf you are talking abou</p></div>
        </div>
        <div id="Actions" class="flex-shrink-1 px-2 py-2">
            <div class="row px-0">
                <div class="col-8 pe-0">
                    <input type="hidden" name="chat_id" id="chat_id" value="1">
                    <input type="text" class="customInput cBorderBlack py-2" placeholder="Message" id="message">
                </div>
                <div class="col-4 ps-0">
                    <button class="customButton py-2 btn-outline-success  fw-bolder border-success" id="sendBtn">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>

补充说明 #

flex-grow-1是Bootstrap内置类，作用是让flex子元素填充容器剩余空间，给消息容器赋予了基于父级的有效高度，此时overflow-auto会在内容超出时自动显示滚动条。

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