Flexbox布局中100%高度失效的根本原因及对策有哪些？

本文共计593个文字，预计阅读时间需要3分钟。

相关专题内容，请提供具体要求或主题，以便进行简写。

在 flex 容器中设置子元素 `height: 100%` 时常无法填满父容器，主因是默认行内级图像（``）存在基线对齐（baseline alignment）导致的隐式底部间隙，进而破坏高度继承链；添加 `vertical-align: top` 可彻底解决该问题。

当使用 Flex 布局构建响应式图文区块（如 .features）时，开发者常期望 .features-img-container 及其内部 <img> 元素严格撑满父容器高度。但即使为容器设置了 height: 100%、为图片设置了 height: 100% 和 object-fit: cover，实际渲染中仍可能出现高度不一致（例如容器高 189px，图片仅 185px），根本原因在于：<img> 是原生行内级（inline）元素，其默认 vertical-align: baseline 会在元素下方保留约 4px 的空白间隙（用于容纳字母如 g、y 的下伸部分），该间隙虽不可见，却会参与行盒（line box）高度计算，导致父容器高度被“撑高”，而图片自身因基线对齐并未真正拉伸至容器顶部到底部的全部空间。

✅ 正确解法是显式重置图像的垂直对齐方式：

.features-img-container img { height: 100%; object-fit: cover; vertical-align: top; /* 关键修复：消除基线间隙 */ }

此外，确保高度继承链完整也很重要：

• 父级 Flex 容器（.features）需有明确高度来源（如视口高度 height: 100vh，或由内容/祖先高度约束）；
• .features-img-container 本身必须能获取到有效高度值（height: 100% 才有意义），否则 100% 将计算为 0；
• 避免在 <img> 标签中同时声明 width="100%" 和 height="100%" 的 HTML 属性——它们会覆盖 CSS 的 height: 100% 行为，建议移除 width 和 height HTML 属性，完全交由 CSS 控制。

最终效果：容器与图片高度严格一致，object-fit: cover 按比例裁剪并填充整个区域，无空白、无错位，响应式表现稳定可靠。