React项目SideBar与Subject等组件重叠，flexbox布局不生效如何解决？

核心原因 #

你的侧边栏根元素设置了position: absolute脱离了文档流，父容器的flex布局不会计算它的宽高，导致后续的内容组件直接从页面最左侧开始渲染，和侧边栏重叠。

修复方案 #

方案一：flex自适应布局（侧边栏随页面整体滚动） #

1. 修改SideBar.css中#header的样式，删除绝对定位配置，添加防挤压属性：

#header {
        /* 删除position: absolute和固定width配置 */
        display: flex;
        flex-shrink: 0; /* 防止窗口缩小时侧边栏被挤压变形 */
}

2. 调整App.js结构，将所有内容路由包裹进统一的主内容容器：

const App = () => {
    return (
        <div>
            <BrowserRouter>
                <div className="app">
                    <Route path="/app" component={SideBar} />
                    {/* 新增主内容容器 */}
                    <div className="main-content">
                        <Route exact path="/" component={Landing} />
                        <Route exact path="/app" component={Home} />
                        <Route exact path="/app/subjects" component={Subjects} />
                    </div>
                </div>
            </BrowserRouter>
        </div>
    );
};

3. 更新app.css，新增主内容容器样式：

.app {
    display: flex;
    flex-direction: row;
    min-height: 100vh; /* 撑满整个视口高度 */
}
.main-content {
    flex: 1; /* 自动占满侧边栏之外的剩余宽度 */
    padding: 20px; /* 可根据需求调整内边距，避免内容贴边 */
    overflow-y: auto; /* 内容过多时容器内独立滚动 */
}

方案二：保留侧边栏固定悬浮效果 #

如果需要侧边栏固定在左侧不随页面滚动，保留position: absolute的前提下，将侧边栏的折叠状态提升到公共父组件（App或Redux），根据折叠状态为主内容容器动态设置margin-left即可：侧边栏展开时设为220px，折叠时设为80px。

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