CSS嵌套Flexbox子元素无法填充垂直空间问题咨询

你的嵌套结构里，内层.parent被放在了外层.content中，但外层.content未设置为flex容器，导致内层的flex布局规则完全失效：

• .content默认是块级元素，没有启用flex布局，它的子元素（内层.parent和.bottom）不会按flex规则分配空间
• 内层.parent的flex:1属性必须在flex容器中才能生效，而它的父元素（外层.content）不是flex容器，自然无法填充剩余垂直空间

修改CSS，给.content添加flex容器属性，让它的子元素能正确分配空间：

html, body {
  margin: 0;
  height: 100%;
}

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

.parent {
  flex: 1; /* 填充剩余垂直空间 */
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* 填充剩余垂直空间 */
  overflow-y: auto;
  padding: 10px; /* 按需调整内边距 */
  /* 新增以下两行，将.content转为flex容器 */
  display: flex;
  flex-direction: column;
}

.bottom {
  background-color: lightgray;
  padding: 10px;
}

修改后，外层.content成为flex容器，内层.parent的flex:1就能填充外层.content的剩余垂直空间，内层.content也会继续填充内层.parent的剩余空间，完美实现嵌套后的垂直空间填充效果。

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