Flex扩展页面大小- React

Question

在我的卡上添加弹性旋转木马使整个页面的宽度增加。我怎样才能避免这种行为？

卡旋转木马组件，我在其中添加了flex：

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

function HorizontalCardsScroll() {
  return (
    <div className="flex overflow-x-scroll mr-auto">
      {/* TODO: Generalize for different kind of cards */}
      <ProjectCard wrap={false} />
      <ProjectCard wrap={false} />
      <ProjectCard wrap={false} />
      <ProjectCard wrap={false} />
      <ProjectCard wrap={false} />
      <ProjectCard wrap={false} />
      <div className="pr-10"></div>
    </div>
  );
}

export default HorizontalCardsScroll;

使用它的页面：

function Techfolio() {
  return (
    <div className="">
      <UserHero />
      <h1 class="mt-20 mb-10 text-5xl font-bold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-5xl dark:text-black text-center">
        Projects
      </h1>
      <HorizontalCardsScroll />
      <Experience />
      <Education />
    </div>
  );
}

export default Techfolio;

Answer 1

你试过在你的挠曲盒上定义宽度吗？如果您希望它是全宽度的，使用(在顺风中) w-full或w-screen。如果希望它有一定的宽度(15雷姆，400‘t，20%，1 1fr，等等)，你能把它设置在挠性盒上，这样它就不会增长吗？