React+Tailwind CSS开发WhatsApp克隆：侧边列表无滚动条问题

你的问题出在列表容器的高度约束设置不合理，导致容器被内容撑开，无法触发内部滚动，反而让整个页面出现滚动条。

核心原因 #

你给列表容器添加了max-h-screen overflow-auto，但max-h-screen仅限制容器最大高度不超过屏幕尺寸，并没有强制容器高度固定。当列表内容过多时，容器会被内容撑得超出屏幕高度，此时容器本身的高度等于内容高度，overflow-auto自然不会生效，最终导致页面整体滚动。

解决步骤 #

要让列表内部独立滚动，必须给容器设置固定的高度约束，确保容器高度不会随内容无限扩张，同时明确开启垂直方向的滚动：

1. 给父容器设置明确高度与布局
   假设你的侧边栏是独立容器，先给父容器设置全屏高度并使用flex布局，让列表容器占满剩余空间：

// 侧边栏父组件示例
<div className="h-screen w-64 flex flex-col">
  {/* 顶部的搜索/头部区域 */}
  <div className="p-4 border-b">WhatsApp 侧边栏</div>
  {/* 聊天列表组件 */}
  <ChatListItem />
</div>

2. 修改列表容器的样式
   将ChatListItem.jsx中的容器className从bg-transparent max-h-screen overflow-auto改为bg-transparent flex-1 overflow-y-auto：

// ChatListItem.jsx 修改后
return (
  <div className="bg-transparent flex-1 overflow-y-auto">
    {dummyChatList.map((e, index) => (
      <List key={index} profilePic={e.profilePic} name={e.name} message={e.message} />
    ))}
  </div>
);

效果说明 #

• flex-1让列表容器占满父容器的剩余空间（父容器为flex布局），高度被固定在父容器剩余范围内。
• overflow-y-auto明确仅在垂直方向内容溢出时显示滚动条，不影响水平方向布局。

设置完成后，当列表内容超过容器高度时，会在列表内部出现滚动条，不会触发整个页面的滚动。

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