如何用Flexbox让.body div撑满父级.con的全部高度？

要实现.body撑满其父级.con的全部高度，只需要对.con和.body做两处关键CSS调整：

• 把.con设置为垂直方向的Flex容器，让内部的.head和.body沿垂直方向排布
• 给.body添加flex: 1属性，让它自动占据.con的剩余高度

修改后的完整CSS代码 #

.flex-container {
  display: flex;
  gap: 12px; /* 可选，优化子容器间距 */
}

.con {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  padding: 10px;
  min-width: 200px; /* 可选，给子容器设置最小宽度 */
}

.head {
  padding: 8px;
  background-color: #f5f5f5;
}

.body {
  flex: 1;
  background-color: yellow;
  padding: 8px;
}

核心原理 #

当.con被设置为display: flex且flex-direction: column后，它的内部元素会按照垂直方向布局。此时给.body设置flex: 1，会让它在.head占用自身高度后，自动填充.con的剩余空间，从而实现撑满父容器高度的效果。

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