如何使用Flex将黄色背景Div拉伸至完整高度以覆盖绿色背景？

我明白你的需求了——你希望黄色的.content和.single区块能填满右侧绿色区域（.home）除搜索栏之外的全部高度，但直接加height:100%会让它们把搜索栏的高度也算进去，导致超出预期。问题出在height:100%的参考对象上，我们可以通过调整flex布局的设置来完美解决这个问题。

核心思路 #

把.home改成垂直方向的flex容器，让搜索栏和内容容器按垂直顺序排列，再给内容容器设置flex:1，让它自动占据.home中除搜索栏外的剩余空间，最后让黄色区块填满这个内容容器的高度即可。

修改后的完整代码 #

CSS 部分

.block { 
  width: 80%; 
  margin: 0 auto; 
  display: flex; 
  flex-wrap: wrap; 
}
.sidebar { 
  height: 600px; 
  width: 25%; 
  background: red; 
}
.home { 
  display: flex; 
  /* 关键：改为垂直方向排列子元素 */
  flex-direction: column; 
  width: 75%; 
  background: green; 
  /* 让右侧区域高度和左侧sidebar保持一致 */
  height: 600px; 
}
.search-bar { 
  width: 100%; 
  padding: 25px; 
  background: blue; 
  /* 避免padding撑宽容器，保证布局整齐 */
  box-sizing: border-box; 
}
.content-wrap { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
  /* 关键：自动填充.home中除搜索栏外的剩余高度 */
  flex: 1; 
}
.content, .single { 
  width: 50%; 
  background: yellow; 
  /* 填满content-wrap的高度 */
  height: 100%; 
}

HTML 部分（无需修改）

<div class="block">
  <div class="sidebar">sidebar</div>
  <div class="home">
    <div class="search-bar">search bar</div>
    <div class="content-wrap">
      <div class="content">lorem ipsum</div>
      <div class="single">test</div>
    </div>
  </div>
</div>

关键修改点说明 #

1. .home设置flex-direction: column：将原来默认的水平flex布局改为垂直方向，让搜索栏和内容容器从上到下依次排列。
2. .home固定height:600px：和左侧sidebar高度保持一致，确保右侧整体区域高度与左侧对齐。
3. .content-wrap添加flex:1：这个属性会让内容容器自动占据.home中除搜索栏之外的所有剩余空间，完美避开了搜索栏的高度。
4. .content和.single设置height:100%：此时它们的父级.content-wrap高度正好是我们需要的剩余空间，所以100%高度就能准确覆盖绿色背景区域了。
5. .search-bar加box-sizing: border-box：避免padding导致搜索栏宽度超出父容器，是个提升布局稳定性的小细节。

这样修改后，黄色区块就会精准覆盖绿色背景中除搜索栏外的全部区域，不会再出现包含搜索栏高度的问题啦。

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