CSS技术问题：如何让flex-child内的div填充剩余高度

嗨，这个场景其实用嵌套Flex布局就能完美解决，咱们直接调整代码就行：

核心思路 #

把每个.flex-child本身也变成垂直方向的Flex容器，这样它内部的两个div就能利用Flex的空间分配特性，让第二个div自动填充剩余高度。

具体代码调整 #

首先修改CSS部分：

.flex-parent-row {
  display: flex;
  height: 100vh; /* 给父容器一个明确高度（比如占满视口），作为子元素的高度参考 */
  /* 可根据需求添加flex-wrap、gap等其他属性 */
}

.flex-child {
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列 */
  flex: 1; /* 让每个flex-child平分父容器宽度，可根据需求调整比例 */
  border: 1px solid #ccc; /* 方便查看布局效果，可删除 */
}

.auto-height {
  /* 无需额外设置，自动适配自身内容高度 */
  padding: 10px;
  background: #f5f5f5;
}

.i-want-this-one-to-fill-remaining-height {
  flex: 1; /* 关键属性！让该元素填充容器内的全部剩余空间 */
  padding: 10px;
  background: #e0e0e0;
}

对应的HTML结构保持你原有的即可：

<div class="flex-parent-row">
  <div class="flex-child">
    <div class="auto-height">这里是高度未知的内容，比如一段文字或图片</div>
    <div class="i-want-this-one-to-fill-remaining-height">我会填充剩余高度</div>
  </div>
  <div class="flex-child">
    <div class="auto-height">另一个高度不同的内容块</div>
    <div class="i-want-this-one-to-fill-remaining-height">我也会填满自己的剩余空间</div>
  </div>
</div>

为什么这样有效？ #

• 当.flex-child被设置为flex-direction: column的Flex容器后，内部元素会沿垂直方向排列，具备Flex布局的空间分配能力。
• .auto-height会根据自身内容占据所需高度，不会被压缩或拉伸。
• flex: 1等同于flex-grow: 1，告诉浏览器该元素要尽可能占据容器内的剩余空间，不管兄弟元素的高度如何变化，它都会自动填满剩余部分。

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