Issue
1. This is 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. This is 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. This is 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;
My question is, what is the reason that scroll dosen't work in task list? Task are shrinked according to the TaskList's height. How to resolve this?
I tried on chatGpt but nothing happened.
Solution
Consider applying flex-shrink: 0
to the root <div>
in the <Task>
component via the shrink-0
class. This overrides the default flex-shrink
value of 1
which attempts to shrink the dimension of elements on the major flex axis to fit.
tailwind.config = {
theme: {
screens: {
mobile: '640px',
},
extend: {
colors: {
primaryGrey: tailwind.colors.slate[500],
secondGrey: tailwind.colors.neutral[500],
green: tailwind.colors.green[500],
},
},
},
};
const Title = () => 'Title';
const TaskInput = () => 'TaskInput';
function Task() {
return (
<div className="bg-secondGrey h-[10vh] w-[70vw] mobile:rounded-[4px] drop-shadow-md mobile:px-2 py-1 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>
);
}
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>
);
}
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>
);
}
ReactDOM.createRoot(document.getElementById('app')).render(<Home/>);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<div id="app"></div>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.