如何让嵌套div占满剩余可用高度？

你的核心问题是嵌套的Flex容器没有形成完整的高度传递链，导致最内层的.expandToFill无法获取到可扩展的空间。以下是保持原有HTML结构的完整修复方案：

问题分析 #

现有代码的几个关键缺失：

1. .router虽然通过flex-grow:1占满了.wrapper的剩余高度，但它本身不是Flex容器，无法将高度约束传递给子元素.container
2. .container没有设置flex-grow:1，无法占满.router的可用高度，导致它的子元素没有足够空间扩展
3. 原CSS中.expandToFill的选择器写错了，缺少开头的.

修复后的完整CSS代码 #

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0; /* 清除默认body边距，避免滚动条 */
}

.router {
  flex-grow: 1;
  display: flex; /* 让router成为flex容器，传递高度约束 */
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 让container占满router的全部可用高度 */
}

.menu {
  background-color: red;
  /* 这里可以随意设置高度，或者留空由内容自动撑开 */
  /* height: 20px; */
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

关键修改说明 #

• 给.router添加display: flex和flex-direction: column：让它的子元素.container能通过Flex布局获取父元素的高度
• 给.container添加flex-grow:1：确保.container占满.router的全部可用空间，为内层的.menu和.expandToFill提供完整的高度上下文
• 修正.expandToFill的选择器语法：类选择器必须以.开头
• 添加margin:0到.wrapper：清除浏览器默认的边距，避免出现不必要的滚动条

这样修改后，无论.menu的高度是固定值还是由内容自动撑开，.expandToFill都会自动填充屏幕的剩余高度，完全符合你的需求。

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