React中Flex布局导致页面宽度增大的解决方法咨询

当给卡片轮播组件添加Flex布局后出现页面宽度被撑开的情况，核心原因是Flex容器未被正确约束宽度，内部卡片的总宽度超出视口范围，连带撑大了整个页面。以下是具体解决方法：

1. 约束轮播容器的宽度 #

给轮播的外层div添加宽度限制，确保容器不会超出父元素的范围。用Tailwind的话，直接添加w-full max-w-full类：

// 修改HorizontalCardsScroll组件的容器
<div className="flex overflow-x-scroll mr-auto w-full max-w-full">
  <ProjectCard wrap={false} />
  {/* 其他卡片 */}
</div>

2. 调整额外的内边距元素 #

你在卡片末尾添加的<div className="pr-10"></div>会额外增加容器总宽度，建议把这个内边距直接加到轮播容器上，避免额外元素占用宽度：

<div className="flex overflow-x-scroll mr-auto w-full max-w-full pr-10">
  <ProjectCard wrap={false} />
  {/* 其他卡片 */}
</div>

3. 固定卡片宽度 #

检查ProjectCard组件，确保卡片有固定宽度或最大宽度限制，防止单张卡片过宽导致容器总宽度超标。比如给卡片添加w-64（Tailwind）或width: 16rem的样式：

// 在ProjectCard组件中设置宽度
<div className="w-64">
  {/* 卡片内容 */}
</div>

4. 禁止页面整体横向滚动（可选） #

如果页面仍出现横向滚动条，给页面最外层容器添加overflow-x-hidden，限制页面只能纵向滚动：

function Techfolio() {
  return (
    <div className="overflow-x-hidden">
      <UserHero />
      {/* 其他内容 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Gabriele Cinà