Flex容器内chat-messages无法实现Overflow Scroll问题求助

问题背景 #

尝试实现聊天消息容器#chat-messages内容溢出时滚动，但所有测试浏览器均无效。已尝试添加height、min-height、position、flex-basis属性，甚至嵌套div设置绝对定位，均未达预期。

HTML结构 #

<div id="editor">
    <iframe id="preview" title="editor preview"></iframe>

    <div id="chat-container" class="chat-centered">
        <div id="chat-header">
            <span id="chat-title">Bot</span>
            <button id="minimize-button">&minus;</button>
        </div>
        <div id="chat-messages">

        </div>
        <div id="chat-input">
            <div id="input-box" contenteditable="true"></div>
            <button id="send-button">Send</button>
        </div>
    </div>

    <button id="chat-toggle-button"></button>
</div>

相关CSS #

#chat-container {
    color: #333;
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

#chat-messages {
    flex-grow: 1;
    padding: 10px;
    padding-bottom: 20vh;
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}

问题根源 #

1. #chat-messages设置的padding-bottom:20vh会过度撑开容器高度，导致overflow-y:auto无法触发滚动——容器高度被内边距拉得远超父级约束，内容永远不会“溢出”。
2. #chat-container仅设置max-height，未明确固定高度，flex子元素的flex-grow:1无法准确计算剩余可用空间。

解决方案 #

方案1：调整内边距与容器高度 #

#chat-container {
    color: #333;
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 600px;
    height: 80vh; /* 明确设置固定高度，确保flex布局能分配空间 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

#chat-header {
    /* 固定头部高度或让内容自然撑开，确保高度确定 */
    padding: 12px;
    background-color: #f0f0f0;
}

#chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}

#chat-input {
    /* 固定输入区高度或让内容自然撑开，确保高度确定 */
    padding: 10px;
    border-top: 1px solid #e5e5e5;
}

方案2：保留底部空间的优化版（如需消息底部留空） #

在#chat-messages内嵌套一层容器，用内部容器控制内边距和对齐，避免影响外层滚动逻辑：

<div id="chat-messages">
    <div class="messages-wrapper">
        <!-- 消息内容插入此处 -->
    </div>
</div>

对应的CSS：

#chat-container {
    color: #333;
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 600px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

#chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
}

.messages-wrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    padding-bottom: 10px; /* 用小值内边距替代20vh，避免撑开容器 */
    min-height: 100%; /* 确保容器占满父级高度，保持消息底部对齐 */
}

#chat-header, #chat-input {
    padding: 12px;
    background-color: #f0f0f0;
    border-top: 1px solid #e5e5e5;
}

以上两种方案均可让#chat-messages在内容溢出时正确显示滚动条，同时保持消息底部对齐的布局效果。

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