如何使用TailwindCSS进行溢出？

6ie5vjzr 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(164)

1.此为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;

字符串

2.此为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;

型

3.任务组件：

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;

型
我的问题是，是什么原因导致任务列表不能滚动？任务会根据任务列表的高度缩小。如何解决这个问题？
我试过chatGpt，但什么也没发生。

css

来源：https://stackoverflow.com/questions/77731524/how-to-overflow-using-the-tailwindcss

1条答案

按热度按时间

h9a6wy2h1#

考虑通过shrink-0类将flex-shrink: 0应用于<Task>组件中的根<div>。这将覆盖1的默认值flex-shrink，该值试图缩小主flex轴上元素的尺寸以适应。

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/>);

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

如何使用TailwindCSS进行溢出？

1条答案

相关问题

热门标签

最新问答