本文详解在 flexbox 布局中，如何使含图片的子容器自动匹配含文本的兄弟容器高度，实现图文尺寸动态联动——核心在于正确利用 flex 的默认行为与百分比高度的继承条件。
本文详解在 flexbox 布局中，如何使含图片的子容器自动匹配含文本的兄弟容器高度，实现图文尺寸动态联动——核心在于正确利用 flex 的默认行为与百分比高度的继承条件。
在实际开发中，许多初学者会误以为仅靠 height: 100% 就能让子元素“自动撑满父容器”，但 CSS 中百分比高度生效的前提是：父元素必须具有明确的高度值（非 auto）。而你的原始代码中 .parent { height: auto; } 恰恰破坏了这一前提，导致 .child-img { height: 100%; } 无法计算，进而使 img { height: 50%; } 失效——图片最终按固有尺寸渲染。
✅ 正确解法并非依赖手动设置高度，而是利用 Flexbox 的天然等高特性：
<div class="parent">
<div class="child-img">
<img src="image1.jpg" alt="Icon 1">
<img src="image2.jpg" alt="Icon 2">
</div>
<div class="child-txt">
<p>Title Text Here</p>
</div>
</div>.parent {
display: flex; /* 启用 Flex 布局 */
align-items: stretch; /* 默认值，确保子项在交叉轴上拉伸至父容器高度 */
/* height: auto; ← 无需显式设 height，由内容决定 */
}
.child-img,
.child-txt {
/* 不设 height，让 Flex 自动分配等高空间 */
}
.child-img img {
height: 50%; /* 此时 % 基于 .child-img 的实际高度（即与 .child-txt 等高） */
width: auto;
}? 关键原理说明：
- Flex 容器默认 align-items: stretch，这意味着所有子项（.child-img 和 .child-txt）在垂直方向（交叉轴）会自动拉伸至容器高度；
- 容器高度由内容最高的子项（此处为 .child-txt 中的 <p>）决定；
- 因此 .child-img 实际高度 = .child-txt 高度 → img { height: 50% } 的基准即为该等高值，实现“文字变大 → 文本区变高 → 图片区同步变高 → 图片按比例缩放”。
⚠️ 注意事项：
- 避免给 .parent 或 .child-img 设置 height: auto + height: 100% 混用，这会导致高度计算链断裂；
- 若需限制最大高度，可对 .parent 使用 max-height，并配合 overflow: hidden；
- 图片建议添加 object-fit: contain 或 width: 100% 配合 height: 50%，防止变形；
- 如需响应式适配，可将 font-size 改为 rem 或 clamp()，图片高度百分比将自动跟随缩放。
总结：与其强行用 height: 100% “推算”高度，不如信任 Flex 的等高机制——它天然支持内容驱动的高度联动，简洁、可靠且语义清晰。
