Flex 擴展頁面大小 - React

Question

將 flex 添加到我的卡片輪播中會使整個頁面的寬度增加。 我怎樣才能避免這種行為？

我要在其中添加 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

您是否嘗試在 flexbox 上定義寬度？ 如果你想讓它全寬使用（順風） w-full或w-screen 。 如果想讓它有一定的寬度（15rem、400px、20%、1fr 等），你能不能把它設置在 flex box 上讓它不增長？