如何让嵌套Flex容器的子元素.content2成为占剩余空间的可滚动容器？

核心问题是**.content元素未设置为Flex容器**，导致它的子元素.container2无法正确继承可用空间。只需做两处修改即可解决：

1. 给.content添加display: flex，让它成为Flex容器，子元素能正确分配空间
2. 移除.container2的height: 100%（Flex子元素会自动填充父容器空间，无需额外设置）

修改后的完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Parent Container */

.container {
  border: 1px solid black;
  height: 100vh;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

.navbar {
  background-color: wheat;
  padding: 10px;
  text-align: center;
}

.content {
  border: 1px solid black;
  padding: 10px;
  flex: 1;
  /* 新增：让.content成为Flex容器 */
  display: flex;
}

/* Child Container */

.container2 {
  flex: 1;
  /* 移除多余的height: 100% */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

.navbar2 {
  background-color: wheat;
  padding: 10px;
  text-align: center;
}

.content2 {
  flex: 1;
  padding: 10px;
  border: 1px solid purple;
  /* 推荐用auto，仅在内容溢出时显示滚动条 */
  overflow: auto;
}

.content2 h1 {
  font-size: 18px;
  font-weight: normal;
}

原理说明 #

• 原代码中.content只是.container的Flex子元素（通过flex:1占据剩余空间），但它本身不是Flex容器，导致.container2的height:100%无法正确获取.content的可用空间，反而会跟随内容高度无限扩张。
• 将.content设为Flex容器后，.container2作为它的Flex子元素，flex:1会自动填满.content的全部空间。
• 此时.container2作为垂直Flex容器，.navbar2占据自身高度，.content2通过flex:1占据.container2的剩余空间，配合overflow:auto，当内容超出该空间时自动触发滚动。

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