如何让Flexbox子div填充满父容器高度？响应式卡片布局问题

你的核心判断是对的——cast-card-info没有填满父容器的垂直高度，导致无法通过justify-content: space-between把链接推到右下角。只需要做两处关键调整：

• 给cast-card-info添加align-self: stretch：因为父容器cast-card是flex-direction: row，这个属性会让子元素在垂直方向（交叉轴）拉伸至与父容器高度一致，替代固定高度实现响应式填充。
• 移除cast-card-info中的height: 100%：这个属性在父容器高度未明确时无效，反而会干扰拉伸逻辑。

另外，确保cast-card的高度由内容自动决定，把height: 100%改为height: auto（或直接删除，默认值即为auto），避免不必要的高度限制。

修改后的代码 #

CSS

.cast-card{
    width: 600px;
    height: auto; /* 让高度由内容自动决定 */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    background-color: var(--light);
    border: var(--border-size) solid var(--dark);
    border-radius: 6px;
    box-shadow: 4px 4px 0px var(--dark);
    padding: 8px;
    box-sizing: border-box;
}

.cast-card-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 12px;
    flex: 1 1 auto;
    align-self: stretch; /* 垂直拉伸填满父容器高度 */
}
.cast-card-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* 保证标题和段落左对齐、顶对齐 */
    gap: 12px;
    flex: 1 1 auto;
}

HTML

<div class="cast-card">
  <img class="cast-card-img" src="http://via.placeholder.com/148x243" alt="photo">
  <div class="cast-card-info">
    <div class="cast-card-text">
      <h3>heading</h3>
      <p>Morbi euismod nisl sit amet auctor fringilla. Suspendisse potenti. Nam auctor vel purus sed interdum. Donec pellentesque lacus tellus .</p>
    </div>
    <a class="link" href="">Read more</a>
  </div>
</div>

调整后，cast-card-info会自动填满卡片的垂直高度，justify-content: space-between将文本块固定在上方、链接推至右下角；cast-card-text的align-items: flex-start确保标题和段落左对齐且顶对齐，完全满足响应式需求，无需设置固定高度。

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