如何使用CSS实现class为chat的div元素可滚动？

问题原因分析 #

你遇到的滚动失效问题由两个核心原因导致：

• 你的.chat元素使用了flex布局，flex容器默认min-height: auto的特性会阻止内容溢出时触发滚动，容器高度会被内容直接撑开，因此添加overflow: auto也不会出现滚动条
• 你未给.right下的.top元素设置明确高度，导致.chat的height: calc(100% - 48px)计算结果不符合预期，也会间接导致滚动失效

纯CSS解决方案 #

第一步：调整基础样式 #

补充.top元素高度，同时修改.active-chat的属性：

/* 补充.top的高度，和chat高度计算的减去值保持一致 */
.container .right .top {
    height: 48px;
}

.container .right .chat.active-chat {
    /* 保留flex布局，删除冗余的display:block */
    display: flex;
    overflow-y: auto;
    /* 覆盖flex容器默认min-height属性，允许溢出滚动 */
    min-height: 0;
    /* 可选：优化滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}

第二步（可选：适配聊天窗口默认吸底需求） #

如果你需要聊天消息默认靠底部展示，新增内容时也保持吸底，不需要额外JS，可以修改HTML结构加一层内容包裹，配合CSS实现：

<div class="chat" data-chat="person1">
  <!-- 新增内容包裹层 -->
  <div class="chat-content">
    <div class="conversation-start">
       <span></span>
    </div>
    <div class="bubble you">
       Hi,
    </div>
    <div class="bubble me">
       Hello,
    </div>
  </div>
</div>

新增对应CSS：

.container .right .chat .chat-content {
    margin-top: auto;
}

修改后可以删除.chat原有样式里的justify-content: flex-end属性，避免内容顶部溢出被裁剪的问题。

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