1. The Home Component:
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;
2. The TaskList Component:
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;
3. The Task Component:
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;
Why is the scroll not working in the task list? Tasks are shrinked based on the height of TaskList. How can this be resolved?
I tried asking on chatGpt but did not receive a solution.