如何让CSS元素的overflow从底部开始展示？

针对你给出的容器CSS样式，这里提供两种可行的解决方案：

纯CSS方案（需注意DOM顺序影响） #

修改你的CSS，给容器添加弹性布局并反向排列内容：

.user_chat .chat{
    height: 425px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}

这个方法会让容器内的元素从下往上排列，滚动条默认停在底部，从而默认展示最新的内容。但要注意它会反转DOM内元素的视觉顺序：如果你的聊天消息DOM是按「旧消息在前、新消息在后」的顺序编写，使用该样式后视觉上会变成新消息在上、旧消息在下。若要保持原有视觉顺序，你需要把DOM内的消息顺序反过来（新消息放在DOM结构的前面），或者使用下面的JS方案。

JS方案（通用无DOM顺序限制） #

当容器内的内容更新后（比如发送新消息、加载历史消息完成），执行以下代码强制滚动到底部：

const chatContainer = document.querySelector('.user_chat .chat');
chatContainer.scrollTop = chatContainer.scrollHeight;

scrollHeight代表容器内容的总高度，将scrollTop设置为该值时，容器会自动滚动到内容最底部，默认展示最新消息。如果使用Vue、React等框架，可以在内容更新后的生命周期钩子（比如Vue的nextTick、React的useEffect）中执行这段代码。

进阶优化：避免干扰用户手动滚动 #

如果希望只有当用户当前停留在容器底部时，新消息进来才自动滚动，可以添加判断逻辑：

const chatContainer = document.querySelector('.user_chat .chat');
// 允许1px误差，判断是否处于底部
const isAtBottom = chatContainer.scrollTop + chatContainer.clientHeight >= chatContainer.scrollHeight - 1;
if (isAtBottom) {
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

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