Tailwind CSS实现侧边栏外屏幕1/3与2/3分区问题求助

你的问题出在三个核心点上：

1. React属性使用错误：React组件中需用className替代原生HTML的class，否则Tailwind样式不会生效。
2. 主内容区域未占据剩余空间：RouterProvider渲染的内容没有被设置为填充侧边栏之外的所有可用宽度，导致Dashboard的布局比例计算基准错误。
3. Dashboard容器未占满父级宽度：即使主内容区域占了剩余空间，Dashboard的flex容器也需要确保自身宽度为100%，这样内部的w-1/3和w-2/3才能基于正确的宽度计算比例。

修复后的代码 #

1. 修正Dashboard组件 #

import React from 'react'

const Dashboard = () => {
  return (
    // 替换class为className，添加w-full确保占满父容器宽度
    <div className="flex w-full">
      <div className="w-1/3 bg-blue-400">
       This should be the 1/3 of the remaining screen (ie screen excluding sidebar )
      </div>
      <div className="w-2/3 bg-blue-800">
        This div should be 2/3 of the remaining screen (ie screen excluding sidebar)
      </div>
    </div>
  )
}

export default Dashboard

2. 修正App.js中的布局 #

给RouterProvider包裹一层带flex-1的div，让它占据侧边栏之外的剩余空间，同时添加h-screen让整体布局占满屏幕高度：

import  Dashboard from "./components/Dashboard";
import Sidebar from "./components/Sidebar";
import Messages from "./components/Messages";

import {
  createBrowserRouter,
  RouterProvider,
  Navigate
} from "react-router-dom";

const routes = [
  {
    path: '/',
    element:<Dashboard/>,
  },
  {
    path: '/messages',
    element: <Messages/>,
  }
];

const routeConfig = createBrowserRouter(routes);

function App() {
  return (
    <>
      <div className='flex h-screen'>
        <Sidebar/>
        {/* flex-1让该容器填充侧边栏外的剩余空间，overflow-auto处理内容溢出 */}
        <div className="flex-1 overflow-auto">
          <RouterProvider router={routeConfig}/>
        </div>
      </div>
    </>
  )
}

export default App;

3. 可选：固定侧边栏（防止随内容滚动） #

如果希望侧边栏固定在左侧不随主内容滚动，给Sidebar的外层div添加fixed left-0 top-0：

// Sidebar组件的外层容器
<div className="fixed left-0 top-0 flex flex-col h-screen w-64 bg-sidenavbar">

修复逻辑说明 #

• flex-1是Flexbox核心特性，会让目标容器自动填充父级的剩余空间，确保主内容区域基于侧边栏之外的宽度计算布局。
• React要求用className定义样式类，这是框架语法规范，不替换的话Tailwind无法识别并应用样式。
• w-full确保Dashboard的flex容器占满父级宽度，让内部的比例类（w-1/3、w-2/3）基于剩余屏幕宽度进行分配。

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