TailwindCSS下React TaskList滚动失效问题排查与解决求助

组件代码 #

Home组件 #

import React from "react";
import Title from "./Title";
import TaskInput from "./TaskInput";
import TaskList from "./TaskList";

function Home() {
  return (
    <div className="h-screen w-screen bg-primaryGrey flex flex-col justify-center items-center mobile:px-3 mobile:py-3">
      <Title />
      <TaskInput />
      <TaskList />
    </div>
  );
}
export default Home;

TaskList组件 #

import React from "react";
import Task from "./Task";

function TaskList() {
  return (
    <div className="bg-green mobile:w-[75vw] mobile:h-[50vh] mobile:pt-3 flex flex-col items-center justify-start mobile:gap-1 overflow-auto">
      <Task />
      <Task />
      <Task />
      <Task />
      <Task />
    </div>
  );
}

export default TaskList;

Task组件 #

import React from "react";

function Task() {
  return (
    <div className="bg-secondGrey h-[10vh] w-[70vw] mobile:rounded-[4px] drop-shadow-md mobile:px-2 py-1 flex">
      <div className="h-full w-[10vw] bg-black"></div>
      <div className="h-full w-[50vw] bg-green"></div>
      <div className="h-full w-[10vw] bg-black"></div>
    </div>
  );
}
export default Task;

问题原因 #

1. Flex子项默认收缩机制：TaskList采用flex-col布局，其中的Task组件作为flex子项，默认继承flex-shrink: 1属性。当容器高度不足以容纳所有子项时，子项会自动压缩自身高度适配容器，而非触发溢出滚动。
2. 高度约束不全面：当前TaskList仅在移动端设置了固定高度mobile:h-[50vh]，非移动端未设置高度限制，导致容器会随内容自动撑开，无法触发overflow-auto的滚动逻辑。

解决方案 #

1. 禁止Task子项收缩 #

给Task组件的根元素添加flex-shrink-0类，阻止flex容器压缩子项高度：

function Task() {
  return (
    <div className="bg-secondGrey h-[10vh] w-[70vw] mobile:rounded-[4px] drop-shadow-md mobile:px-2 py-1 flex flex-shrink-0">
      <div className="h-full w-[10vw] bg-black"></div>
      <div className="h-full w-[50vw] bg-green"></div>
      <div className="h-full w-[10vw] bg-black"></div>
    </div>
  );
}

2. 补充全断点的高度约束 #

为TaskList添加全场景的固定高度，确保容器高度不会随内容无限扩展，触发滚动：

function TaskList() {
  return (
    <div className="bg-green w-[75vw] h-[50vh] pt-3 flex flex-col items-center justify-start gap-1 overflow-auto">
      <Task />
      <Task />
      <Task />
      <Task />
      <Task />
    </div>
  );
}

如果仅需移动端启用固定高度，可保留mobile:h-[50vh]，同时为非移动端添加合适的高度值（如h-[60vh]），避免容器高度失控。

3. 验证效果 #

修改完成后，当Task数量超出TaskList容器高度时，子项会保持原有高度，容器内部自动出现滚动条，滚动功能正常生效。

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