如何让Flexbox子元素占满父容器全部空间？

嘿，这个Flexbox的问题我之前也碰到过，给你捋清楚怎么解决！

问题根源 #

你的.parent元素虽然通过flex:1占满了上层容器的剩余空间，但它本身不是Flex容器——这就导致它的子元素（child-one和child-two）没法利用Flex的布局规则来填充整个高度。你之前试的height:100%不生效，是因为height:100%要求父元素有明确的height值，而.parent的高度是Flex动态分配的，不是固定数值，所以子元素的百分比高度无法识别。

解决方法 #

只需要两步就能搞定：

1. 把.parent变成垂直方向的Flex容器
2. 给需要占满空间的子元素设置flex:1

修改后的CSS代码如下：

.min-h-screen { min-height: 100vh; display: flex; flex-direction: column; }
.parent { 
  flex:1; 
  background: red; 
  display: flex; /* 新增：让parent成为Flex容器 */
  flex-direction: column; /* 新增：垂直排列子元素 */
}
.child-one { 
  background: green; 
  display:flex; 
  flex:1; /* 新增：让child-one占满parent的可用空间 */
}
.child-two { 
  background: yellow; 
  flex:1; /* 新增：让child-two占满parent的可用空间 */
}

效果说明 #

• .parent变成Flex容器后，它的高度会被flex:1完全撑满上层.min-h-screen的剩余空间
• child-one和child-two通过flex:1会平分.parent的高度（如果想让其中一个占更多比例，比如child-one占2/3、child-two占1/3，可以把它们的flex值改成2和1）
• 如果你的子元素内部还有内容需要填满（比如child-one里的<p>），因为child-one已经是Flex容器了，内容会自动填满它的空间，不需要额外设置

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