React项目中navbar和main div重叠，如何实现二者并排布局？

问题根因 #

• CSS类名大小写不匹配：JSX中根容器类名是大写的App，但CSS中写的是小写的.app，导致flex布局规则完全没有生效，两个容器默认按块级元素逻辑排列，叠加导航栏默认定位规则就会出现遮挡重叠。
• 宽度设置冲突：已经给main容器设置flex:0.8的情况下再加width:100%，会破坏flex的自动宽度分配逻辑。
• 结构嵌套错误：footer容器被错误嵌套在main容器内部，会打乱flex占比计算逻辑。

修复方案 #

1. 修正JSX结构 #

把footer从main容器内移出，和navbar、main同级：

<div className="App">
  <div className="navbar">
    <Navbar></Navbar>
  </div>
  <div className="main">
    <Layout>
      <div className = "routes">
        <Switch>
          <Route exact path = "/">
            <Homepage/>
          </Route>
          <Route path = "/exchanges">
            <Exchanges/>
          </Route>
          <Route exact path = "/cryptocurrencies">
            <Cryptocurrencies/>
          </Route>
          <Route path = "/crypto/:coinId">
            <CryptoDetails/>
          </Route>
          <Route path = "/news">
            <News/>
          </Route>
        </Switch>
      </div>
    </Layout>
  </div>
  <div className="footer">
    <Typography.Title level = {5} style = {{color:"white"}} align = "center">
      The CryptoVerse <br/>
      All rights reserved @2021<br/> made by Utkrisht
    </Typography.Title>
    <Space>
      <Link to = "/">Home</Link>
      <Link to = "/exchanges">Exchanges</Link>
      <Link to = "/news">News</Link>
    </Space>
  </div>
</div>

2. 修正CSS样式 #

修正类名大小写，删除冲突属性，补充适配规则：

/* 类名改为大写和JSX匹配 */
.App{
    display: flex;
    overflow: auto;
    min-height: 100vh;
}

.navbar{
    /* 固定占比20%，避免内容挤压导航栏变形 */
    flex: 0 0 20%;
    background-color: rgb(0, 21, 41);
}

.main{
    /* 占满剩余宽度，删除冲突的width:100% */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.routes{
    padding: 20px;
    flex: 1;
}
.footer{
    background-color: rgb(0, 21, 41);
    padding: 20px 0;
}

注意：如果你的<Navbar>组件内部自带position: fixed或者position: absolute定位规则，请一并删除，flex布局下不需要额外固定定位，否则仍会出现重叠问题。

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