React+Tailwind导航栏在Chrome布局异常，Firefox/Safari正常

我使用React结合Tailwind开发导航栏时遇到以下问题：

• 设置justify-center时，导航元素无法居中显示
• 设置justify-end时，部分元素被截断无法完整显示
  尝试过添加w-full或w-screen属性，问题仍未解决。该导航栏在Firefox和Safari中显示正常，仅在Chrome中出现异常。

相关代码 #

Navbar.jsx #

export default function Navbar() {
  return (
    <div className="fixed bg-bg-dark w-full">
      <div className="flex flex-row justify-center">
        <h1 className=" text-2xl text-accent">DabberGame</h1>
        <form className="">
          <input type="text" />
        </form>
        <button className="text-white">Post Listing</button>
        <p className="text-white">|</p>
        <button className="text-white">Login</button>
      </div>
    </div>
  );
}

App.js #

import Navbar from "./components/Navbar";
function App() {
  return <Navbar />;
}

export default App;

异常效果 #

• 使用justify-center时：
• 使用justify-end时：

解决方案 #

问题根源在于Chrome对fixed定位容器的flex布局溢出处理逻辑与其他浏览器不同，同时缺少内边距和宽度限制导致内容溢出。按以下步骤修复：

1. 给外层fixed容器添加内边距和溢出隐藏，避免内容贴边被截断：

<div className="fixed bg-bg-dark w-full px-4 overflow-x-hidden">

2. 给内部flex容器添加最大宽度限制，确保它不会超出父容器范围，同时添加间距优化布局：

<div className="flex flex-row justify-center max-w-full gap-4 items-center">

3. 给input元素设置宽度限制，防止它撑爆容器：

<input type="text" className="w-64" />

修复后的完整Navbar.jsx代码：

export default function Navbar() {
  return (
    <div className="fixed bg-bg-dark w-full px-4 overflow-x-hidden">
      <div className="flex flex-row justify-center max-w-full gap-4 items-center">
        <h1 className="text-2xl text-accent">DabberGame</h1>
        <form className="">
          <input type="text" className="w-64" />
        </form>
        <button className="text-white">Post Listing</button>
        <p className="text-white">|</p>
        <button className="text-white">Login</button>
      </div>
    </div>
  );
}

注：添加items-center是垂直对齐的优化项，可根据需求取舍。

内容的提问来源于stack exchange，提问作者Qoussay El Akkari