如何在可滚动容器中实现元素底部对齐？

问题场景 #

需要实现一个消息展示区域：

• 最新消息固定显示在容器底部
• 容器为固定高度，内容溢出时自动出现垂直滚动条
• 消息数量不足时，消息自动对齐容器底部

尝试用display: flex+flex-direction: column+justify-content: flex-end实现底部对齐，但会导致容器失去滚动功能；去掉flex属性后，容器可正常滚动，但消息会从顶部开始填充，无法满足底部对齐需求。

解决方案核心思路 #

通过嵌套容器分离滚动逻辑和对齐逻辑：

1. 外层容器：负责设置固定高度、滚动属性，作为滚动容器
2. 内层容器：作为消息的直接父级，用flex布局实现消息底部对齐，同时设置min-height: 100%——消息不足时占满外层容器高度，消息过多时自动撑开高度，触发外层容器滚动。

修改后的完整代码 #

HTML #

<div id="wrapper">
  <div id="message-area">
    <div class="messages-container">
      <div class="message-card">
        Test message
      </div>
      <div class="message-card">
        Test message 2
      </div>
      <div class="message-card">
        Test message 3
      </div>
      <div class="message-card">
        Test message 4
      </div>
      <div class="message-card">
        Test message 5
      </div>
      <div class="message-card">
        Test message 6
      </div>
    </div>
  </div>
  <div id="message-area-2">
    <div class="messages-container">
      <div class="message-card">
        Test message
      </div>
    </div>
  </div>
</div>

CSS #

#message-area,
#message-area-2 {
  height: 200px;
  width: 200px;
  padding-right: 8px;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.messages-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

.message-card {
  width: 90%;
  margin: 3px;
  padding: 8px;
  border: 1px solid;
  border-radius: 5px;
}

#wrapper {
  display: flex;
}

JS #

let messageScrollArea = document.getElementById('message-area');
let messageScrollArea2 = document.getElementById('message-area-2');

messageScrollArea.scroll(0, 100000);
messageScrollArea2.scroll(0, 100000);

效果说明 #

• 消息数量较少时，messages-container因min-height:100%占满外层容器高度，配合justify-content:flex-end使消息对齐底部
• 消息数量超过容器高度时，messages-container被内容撑开，高度超过外层容器，触发外层的overflow-y:scroll，容器可正常滚动，且最新消息始终在可视区域底部

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