How to overflow using the TailwindCSS?

Question

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.

stackoverflow.com/questions/69201915/…

user14758149
– user14758149

2023-12-29 11:08:05 +00:00
Commented Dec 29, 2023 at 11:08 — user14758149
– user14758149, Commented Dec 29, 2023 at 11:08

Wongjn · Accepted Answer · 2023-12-29 11:24:44Z

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>

Collectives™ on Stack Overflow

How to overflow using the TailwindCSS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related