子Div高度溢出父容器问题：导航栏无法适配剩余高度

嘿，这个问题我之前也碰到过！核心是Flex容器的高度计算逻辑在搞鬼～你的.wrapper设置了height:100vh，里面先放了个固定75px高的.header，然后.side和.main又设了height:100%——这里的100%是直接继承.wrapper的整体高度（100vh），不是减去header之后的剩余高度，所以总高度就变成了100vh + 75px，自然就超出容器范围了。

修复步骤 #

我们只需要调整Flex布局的结构，让剩余空间自动分配给导航栏和主内容区就行：

1. 把.wrapper的flex方向改成垂直列布局，这样子元素会从上到下排列：

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: column wrap; /* 把原来的row改成column */
  height: 100vh;
  border-radius: 5px;
  overflow: hidden; /* 保险起见，防止任何意外溢出 */
}

2. 给导航栏和主内容区加个父容器（比如叫.content-wrapper），让这个容器专门占满header下面的剩余空间：

<div class="wrapper">
  <div class="header">
    <div class="box"> intersect </div>
    <div class="box"> rest </div>
  </div>
  <!-- 新增这个容器来装side和main -->
  <div class="content-wrapper">
    <div class="side"> navigation </div>
    <div class="main"> main content </div>
  </div>
</div>

3. 给.content-wrapper设置flex:1，这是关键！它会自动填充.wrapper减去header高度后的所有剩余空间，同时把它也设成flex容器来排列side和main：

.content-wrapper {
  display: flex;
  flex: 1; /* 让这个容器吃掉所有剩余高度 */
  width: 100%;
}

4. 最后把.side和.main的height:100%去掉（留着也不影响，但没必要），再调整下样式细节：

.side { 
  border-bottom-left-radius: 5px; 
  background: #292F32; 
  color: #6B757D; 
  padding: 10px; 
  flex: 0 0 223px; 
  order: 1; 
}
.main { 
  padding: 10px; 
  order: 2; 
  flex: 1; /* 让main占满剩余宽度 */
}

完整修复后的代码 #

CSS

body { 
  background: blue; 
  background-size: cover; 
  font: 14px "Roboto", sans-serif; 
  font-weight: 300; 
  padding: 0; 
  margin: 2% 4%; 
}
* { box-sizing: border-box; }
.wrapper { 
  background: #fff; 
  display: flex; 
  flex-flow: column wrap; 
  height: 100vh; 
  border-radius: 5px;
  overflow: hidden;
}
.header { 
  display: flex; 
  flex-flow: row; 
  height: 75px; 
  width: 100%; 
  border-top-left-radius: 5px; 
  border-top-right-radius: 5px; 
  background: purple; 
}
.box { 
  padding: 10px; 
  height: 100%; 
}
.box:last-child { 
  border-bottom: 2px solid #EBEBEB; 
  width: 100%; 
}
.box:first-child { 
  width: 223px; 
  border-right: 2px solid #EBEBEB; 
}
.content-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
}
.side { 
  border-bottom-left-radius: 5px; 
  background: #292F32; 
  color: #6B757D; 
  padding: 10px; 
  flex: 0 0 223px; 
  order: 1; 
}
.main { 
  padding: 10px; 
  order: 2; 
  flex: 1; 
}

HTML

<body>
 <div class="wrapper">
 <div class="header">
 <div class="box"> intersect </div>
 <div class="box"> rest </div>
 </div>
 <div class="content-wrapper">
 <div class="side"> navigation </div>
 <div class="main"> main content </div>
 </div>
 </div>
</body>

这样调整后，导航栏和主内容区就会乖乖填充header下面的剩余高度，再也不会超出.wrapper的边界啦～

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