React + Tailwind CSS：flex容器overflow-x-scroll横向滚动失效

在移动端设备中，导航栏内的h1及按钮元素总宽度超出容器范围，想要添加横向滚动效果，但使用Tailwind CSS的overflow-x-scroll属性后并未生效。尝试过用overflow:hidden测试，也移除过外层容器，问题依然存在。相关代码如下：

<div>
  <div className="mt-16">
    <div className="flex ">
      <div className="hidden md:block font-semibold ">
      </div>
      <div>
        <div className=" px-4  ">
          <img src="images/Dashboard.jpg" className="rounded-xl w-full " />
          <div className=" flex justify-center">
            <img
              src="images/UserDashboard.jpg"
              className="rounded-full w-28 -mt-16 border-[0.3rem] border-white"
            />
          </div>
          <div className="flex justify-center items-center gap-1">
            <h1 className="text-center text-2xl font-semibold">
              Ella Solis
            </h1>
            <MdVerified className=" text-blue-500 text-2xl" />
          </div>
          <div className="flex mt-3 items-center gap-2   text-gray-700 justify-center">
            <span className="">0 WishList</span>
            <FaDiamond className="items-center text-[0.5rem] text-gray-500" />
            <span className="">0 Voucher</span>
          </div>

          <div className="mt-8 w-full">
            <div className="overflow-x-auto">
              <div className="flex gap-16 text-xs overflow-x-scroll whitespace-nowrap md:gap-12 md:text-lg">
                <h1
                  className={`${showForm === "dashboard" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("dashboard")}
                >
                  Dashboard
                </h1>
                <h1
                  className={`${showForm === "userSettings" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("userSettings")}
                >
                  Profile
                </h1>
                <button
                  className={`${showForm === "shippingInformation" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("shippingInformation")}
                >
                  Shipping Information
                </button>
                <button
                  className={`${showForm === "orderHistory" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("orderHistory")}
                >
                  Order History
                </button>
                <button
                  className={`${showForm === "wishlist" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("wishlist")}
                >
                  Wishlist
                </button>
                <button
                  className={`${showForm === "review" ? "border-b-2 border-[#0D4C90]" : ""}`}
                  onClick={() => handleButtonClick("review")}
                >
                  Review
                </button>
              </div>
            </div>
          </div>

          {showForm === "dashboard" && (
            <div>
              <Dashboard />
            </div>
          )}
          {showForm === "userSettings" && (
            <div>
              <UserSettings />
            </div>
          )}
          {showForm === "shippingInformation" && (
            <ShippingInformation/>
          )}
          {showForm === "orderHistory" && (
            <div>
              <OrderHistory />
            </div>
          )}
          {showForm === "wishlist" && (
            <div className="">
              <Wishlist />
            </div>
          )}
          {showForm === "review" && (
            <div className="">
              <Review />
            </div>
          )}
        </div>
      </div>
    </div>
  </div>
</div>

问题出在滚动容器的层级和宽度设置上，调整以下几点即可生效：

• 移除内部flex容器的overflow-x-scroll属性，将滚动控制交给外层的overflow-x-auto容器
• 给外层滚动容器添加w-full，确保宽度严格限制在父级范围内，避免被内部元素撑开导致滚动失效
• 保留whitespace-nowrap确保导航项不换行，flex布局默认的flex-wrap: nowrap会让所有项在一行排列

修改后的导航栏核心代码如下：

<div className="mt-8 w-full">
  {/* 给滚动容器加上w-full，确保宽度限制在父级范围内 */}
  <div className="overflow-x-auto w-full">
    {/* 移除overflow-x-scroll，保留flex、gap、whitespace-nowrap等属性 */}
    <div className="flex gap-16 text-xs whitespace-nowrap md:gap-12 md:text-lg">
      <h1
        className={`${showForm === "dashboard" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("dashboard")}
      >
        Dashboard
      </h1>
      <h1
        className={`${showForm === "userSettings" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("userSettings")}
      >
        Profile
      </h1>
      <button
        className={`${showForm === "shippingInformation" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("shippingInformation")}
      >
        Shipping Information
      </button>
      <button
        className={`${showForm === "orderHistory" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("orderHistory")}
      >
        Order History
      </button>
      <button
        className={`${showForm === "wishlist" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("wishlist")}
      >
        Wishlist
      </button>
      <button
        className={`${showForm === "review" ? "border-b-2 border-[#0D4C90]" : ""}`}
        onClick={() => handleButtonClick("review")}
      >
        Review
      </button>
    </div>
  </div>
</div>

额外优化建议：

• 给滚动容器添加scrollbar-hide（需启用Tailwind滚动条插件）隐藏默认滚动条，提升移动端界面简洁度
• 适当减小移动端的gap值，避免导航项间距过大导致不必要的滚动

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