如何实现垂直扩展的div向上推动上方元素（聊天场景）

我正在做一个带动态内容的聊天界面，每个消息div里的图片尺寸不固定，加载完成后会把下方元素往下顶。我想改成让div向上扩展，把上方元素往上推，这样布局偏移主要发生在视口上方，不会影响当前查看的底部内容。

我试过用设置了flex-direction: column; justify-content: flex-end的Flexbox布局，一开始有效，但内容堆到顶部后，overflow: scroll没法触发滚动。

我的CSS代码：

.wrapper {
  height: 500px;
  width: 500px;
  overflow: scroll;
}

.container {
  height: 100%;
  padding: 30px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

当前效果：

我想要的效果是：上方元素被向上推动，同时容器能触发overflow: scroll，新内容持续把旧内容往上顶。类似把容器设为display: block后旋转180°的效果：

解决方案 #

问题根源是Flex容器设置了固定height: 100%，当内容超过容器高度时，justify-content: flex-end会强制内容留在底部，但Flex容器不会让子元素高度突破自身限制，自然触发不了滚动。

调整方案如下：

1. 给.wrapper添加display: flex和flex-direction: column，让内部容器能正确继承高度逻辑；
2. 把.container的height: 100%改成min-height: 100%，保证容器至少占满父容器高度，内容增多时能自动拉伸；
3. 保留justify-content: flex-end维持初始内容贴底的效果。

调整后的CSS代码：

.wrapper {
  height: 500px;
  width: 500px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.container {
  min-height: 100%;
  padding: 30px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px; /* 可选，给消息增加间距 */
}

/* 示例消息样式 */
.message {
  padding: 10px 14px;
  background-color: #e5e5ea;
  border-radius: 18px;
  max-width: 70%;
}

这样修改后，新消息添加到容器末尾时，旧内容会被向上顶出视口，容器高度超过.wrapper时自动触发滚动，完全符合你想要的效果。

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