Next.js 13中使用Tailwind CSS实现横向滚动失效求助

问题根源 #

你的代码中，父容器使用flex布局时，默认会启用flex-shrink: 1（子元素自动收缩）且未设置flex-nowrap，导致所有300px宽的子元素被强行压缩进1020px的父容器内，无法触发横向滚动。

修复步骤 #

需要做两处关键调整：

• 给父容器添加flex-nowrap类，强制子元素在单行排列，禁止换行
• 给所有子元素添加flex-shrink-0类，锁定子元素宽度，禁止被压缩

修改后的完整代码 #

<div className="flex w-[1020px] p-4 overflow-x-scroll flex-nowrap">
  <div
    className={`w-[300px] h-[300px] self-center relative flex-shrink-0`}
    onClick={() =>
      window.open("https://sagarmathamis.netlify.app/", "_blank")
    }
  >
    <Image src={mis} alt="" layout="fill"></Image>
  </div>
  <div
    className={`w-[300px] h-[300px] self-center relative flex-shrink-0`}
    onClick={() =>
      window.open("https://revampnewsportal.netlify.app/", "_blank")
    }
  >
    <Image src={newsportal} alt="" layout="fill"></Image>
  </div>
  <div
    className={`w-[300px] h-[300px] self-center relative flex-shrink-0`}
    onClick={() =>
      window.open("https://onlinesstores.netlify.app/", "_blank")
    }
  >
    <Image src={onlinestore} alt="" layout="fill"></Image>
  </div>
  <div
    className={`w-[300px] h-[300px] self-center relative flex-shrink-0`}
    onClick={() =>
      window.open("https://searcheproducts.netlify.app/", "_blank")
    }
  >
    <Image src={searchproduct} alt="" layout="fill"></Image>
  </div>
  <div
    className={`bg-teal-500 w-[300px] h-[300px] self-center flex-shrink-0`}
    onClick={() =>
      window.open(
        "https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
        "_blank"
      )
    }
  ></div>
  <div
    className={`bg-red-500 w-[300px] h-[300px] self-center flex-shrink-0`}
    onClick={() =>
      window.open(
        "https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
        "_blank"
      )
    }
  ></div>
  <div
    className={`bg-green-500 w-[300px] h-[300px] self-center flex-shrink-0`}
    onClick={() =>
      window.open(
        "https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
        "_blank"
      )
    }
  ></div>
  <div
    className={`bg-blue-500 w-[300px] h-[300px] self-center flex-shrink-0`}
    onClick={() =>
      window.open(
        "https://www.linkedin.com/in/roshan-ojha-78832a1aa/",
        "_blank"
      )
    }
  ></div>
</div>

可选优化 #

如果需要隐藏滚动条但保留滚动功能，可以给父容器添加scrollbar-hide类（需确保Tailwind配置启用该工具类，或安装tailwind-scrollbar-hide插件）。

内容的提问来源于stack exchange，提问作者Roshan Ojha