Flex extends page size - React

Question

adding flex to my cards carousel makes the whole page increase in width. How can I avoid this behaviour?

Card carousel Component in which I'm adding 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;

Page in which it's used:

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

Did you try defining a width on your flexbox? If you want it to be full width use (in tailwind) w-full or w-screen. If want it to be a certain width (15rem, 400px, 20%, 1fr, etc.), can you set that on the flex box so it doesn't grow?