使用Flexbox设置子元素高度为父元素100%时出现溢出问题求助

你当前的问题是尝试让.content-text占满.content的剩余高度，但设置height:100%后元素高度远超父元素边界，核心原因是100%高度是继承父元素总高度，而非扣除已有内容后的剩余空间。以下是具体修复方案：

解决方案：利用Flex布局实现剩余高度填充 #

将.content设置为垂直方向的Flex容器，通过flex-grow属性让.content-text自动占据剩余空间：

修改后的完整代码 #

.container {
  height: 340px;
  background-color: #DDDEDA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-wrap {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  height: 100%;
  width: 171px;
  background-color: aqua;
  /* 关键：设置为垂直方向的Flex容器 */
  display: flex;
  flex-direction: column;
  gap: 5px; /* 用gap替代margin-top，统一控制内部间距 */
}

.content-pic {
  width: 100%;
  height: 115px;
  background-color: green;
}

.content-text {
  background-color: red;
  width: 100%;
  /* 关键：自动填充剩余高度 */
  flex-grow: 1;
}

<div class="container">
  <div class="container-wrap">
    <div class="content">
      5 HOURS AGO
      <div class="content-pic"></div>
      <div class="content-text"></div>
    </div>
  </div>
</div>

原方法无效的原因 #

• height:100%是让.content-text继承.content的总高度，但.content内已有文本和固定高度的.content-pic，叠加后必然超出父元素边界；
• align-items: stretch仅作用于Flex容器的直接子元素，无法影响.content内部的布局逻辑；
• 定位属性（如position:absolute）虽能强制占满空间，但缺乏灵活性，无法自适应内部内容的高度变化。

核心原理 #

通过将.content设为flex-direction: column的Flex容器，内部元素会垂直排列。给.content-text添加flex-grow:1后，它会自动占据容器中除文本、.content-pic及间距之外的所有剩余空间，既实现了剩余高度填充，又不会超出父元素边界。

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