为什么网格布局会导致x方向溢出？

Question

我正在使用 Nextjs（应用程序路由器）+ Tailwindcss 构建一个简单的 UI。

在构建简单的卡片网格布局时，当盒子超过 2 行时就会出现问题。

如果只有 1 行卡片，则总宽度可以很好地作为视口。

🤔但是如果盒子超过2行，就会发生溢出x。

情况图片

成功

问题

我还观察到所有最高的容器都具有相同的宽度。

代码规范

const MainPage = ({}: MainPageProps): ReactNode => {
  return (
    <div className='min-h-screen-header relative flex h-min flex-grow flex-col items-center justify-start bg-white px-10'>
      {/* 제목 */}
      <div className='flex h-[8dvh] min-h-[60px] w-full items-end justify-start gap-4'>
        <span className='text-2xl font-semibold xl:text-3xl'>내 여행 계획</span>
        <span className='text-sm font-medium xl:text-base'>10개</span>
      </div>
      {/* 필터 / 검색 */}
      <MobileMenu className='md:hidden' />
      <DesktopMenu className='hidden md:flex' />
      {/* 카드 */}
      {/* Todo: 개수 고정 (8) */}
      <div className='relative grid w-full grid-cols-1 gap-6 overflow-x-hidden sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'>
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
        <PlanCard data={dummy_plan} />
      </div>
      {/* 페이지네이션 */}
      <CustomPagination className='py-4' />
    </div>
  )
}

// 计划卡

const PlanCard = ({ data }: PlanCardProps): ReactNode => {
  return (
    <div className='flex h-min w-full flex-col justify-start gap-4 overflow-hidden rounded-lg bg-white p-3 shadow-tb-shadow'>
      <Image src={data.imageSrc} alt='Plan Image' className='aspect-video w-full rounded-md object-cover' />
      <div className='relative'>
        <div className='flex items-end justify-start gap-3'>
          <h2 className='text-lg font-bold lg:text-xl'>{data.title}</h2>
          <span className='text-xs'>{data.region}</span>
        </div>

        <p className='flex items-center pb-5 pt-2 text-xs lg:text-sm'>{data.description}</p>

        <div className='flex items-center justify-between text-xs lg:text-sm'>
          <div className='flex items-center gap-2'>
            <div className='flex items-center gap-1'>
              <LucideIcon color='tbRed' name='Heart' strokeWidth={3} />
              <span>{data.likes}</span>
            </div>
            <div className='flex items-center gap-1'>
              <LucideIcon name='MessageCircle' strokeWidth={3} />
              <span>{data.comments}</span>
            </div>
            <div className='flex items-center gap-1'>
              <LucideIcon name='Bookmark' strokeWidth={3} />
              <span>{data.scraps}</span>
            </div>
          </div>
          <span>{data.schedule}</span>
        </div>
      </div>
    </div>
  )
}

我的解决方案

在 global.css 上，我在 body 上应用了

overflow-x:hidden

。

@layer base {
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    overflow-x: hidden;
  }
}

除了这个解决方案之外，我希望有一个更具理论性的原因和解决方案。

我猜是高度滚动条造成的。 因此，我将宽度

main

从

w-screen

更改为

w-dvw

但这不起作用。

请帮忙

Answer 1

使用

overflow-x-hidden

来停止