如何用Flexbox实现嵌套div中.app__main填充可用高度并支持滚动

我来帮你搞定这个问题！你当前的代码差了关键一步——#root容器没有设置flex布局，导致.app__main的flex:1无法生效。咱们一步步调整：

核心修改点 #

• 让#root成为flex容器，设置flex-direction: column，这样它的子元素（.app__header和.app__main）能按垂直方向分配空间
• 给.app__main添加overflow: auto，当内容高度超过容器时自动出现滚动条

修改后的完整CSS代码 #

html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  margin: 0; /* 移除浏览器默认margin，避免不必要的滚动条 */
  padding: 0;
}

#root, .app__header, .app__main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1;
  display: flex;
  flex-direction: column; /* 关键：让#root的子元素按垂直flex布局排列 */
}

.app__main {
  flex: 1; /* 占据#root的剩余可用高度 */
  overflow: auto; /* 内容超出时显示滚动条 */
}

原理说明 #

之前的代码中，body是flex容器，#root作为它的子元素设置了flex:1，能占满body的剩余高度，但#root本身不是flex容器，它的子元素.app__header和.app__main还是普通的块级元素，.app__main的flex:1自然不会生效。

把#root设置为display: flex; flex-direction: column后，它的子元素就会遵循flex布局规则：.app__header保持原有高度，.app__main通过flex:1占据#root的剩余高度，再配合overflow:auto，就能实现内容超出时滚动的效果啦！

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