display: flex 本身不直接设定子项尺寸，但它会创建新的块格式化上下文（BFC），阻止子元素的外边距塌陷（margin collapse），从而使 .card 完整包裹其内部内容（包括 .card-bottom-container 的上下 margin），导致视觉高度明显增加。
`display: flex` 本身不直接设定子项尺寸，但它会创建新的块格式化上下文（bfc），阻止子元素的外边距塌陷（margin collapse），从而使 `.card` 完整包裹其内部内容（包括 `.card-bottom-container` 的上下 margin），导致视觉高度明显增加。
在 CSS 布局中，一个看似微小的样式变更——如仅为父容器添加 display: flex——却可能引发子元素高度的显著变化。这种现象并非 Flexbox “主动拉伸”子项所致，而是由 CSS 外边距塌陷（Margin Collapse）机制的启用/禁用 所驱动。
? 根本原因：外边距塌陷 vs. BFC 隔离
当 .cards-container 是普通块级容器（display: block）时：
-
.card-bottom-container设置了margin: 1rem（即上下各 1rem）； - 由于
.card本身无 border、padding 或 BFC 触发条件，其内部的上下 margin 会与相邻块级元素（此处为.card的内容边界）发生外边距塌陷； - 结果：
.card-bottom-container的上下 margin 实际“溢出”到.card外部，.card的计算高度仅由内部行内内容（如空<a></a>标签）撑起，视觉上显得极矮（可能仅几像素高）。
而一旦 .cards-container 设为 display: flex：
- Flex 容器自动成为 BFC（块格式化上下文）；
- BFC 的核心特性之一是：内部子元素的垂直外边距不再与外部元素塌陷，且会被严格包含在其父容器内；
- 此时
.card-bottom-container的margin: 1rem被完整容纳在.card内部，.card高度 = 内容高度 + 上下 margin，因此视觉高度显著增大。
✅ 补充验证：即使不使用 Flex，只要为
.card添加border: 1px solid transparent、padding: 1px或overflow: hidden，同样可触发 BFC，获得与display: flex一致的高度表现。
? 推荐解决方案：语义清晰 + 布局可控
避免依赖塌陷行为带来的不确定性，应主动控制盒模型边界：
/* ✅ 推荐：用 padding 替代 margin，语义明确、无塌陷风险 */
.card {
width: 250px;
background-color: white;
border-radius: 30px;
padding: 1rem; /* 将原 .card-bottom-container 的 margin 上移至此 */
box-sizing: border-box;
}
.card-bottom-container {
margin: 0; /* 清除原 margin */
gap: 1rem;
}
.card-tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}<div class="cards-container">
<div class="card">
<!-- padding 已包裹全部内容 -->
<div class="card-bottom-container">
<div class="card-tags-container">
<a href="/path-1" class="card-tag"></a>
<a href="/path-2" class="card-tag"></a>
<!-- ... -->
</div>
</div>
</div>
</div>⚠️ 注意事项与调试技巧
-
不要滥用
height: fit-content：该值在多数浏览器中等价于auto，但若父容器未形成 BFC 或存在塌陷，仍无法解决高度“丢失”问题。 -
检查 computed styles：在 Chrome DevTools 中查看
.card的Computed → height和Margins，若height远小于预期，且margin-top/bottom显示为0px（实际被塌陷），即为本问题典型特征。 -
Flex 不是万能 BFC 触发器：
display: flex、display: grid、overflow: hidden、float: left等均可创建 BFC，选择应基于布局语义（如需弹性排列优先用 Flex，仅需隔离则用overflow: hidden）。 -
兼容性提示：BFC 行为在所有现代浏览器中一致；IE8+ 支持
hasLayout（类似概念），但建议通过zoom: 1或overflow: hidden兼容。
总之，display: flex 改变子元素高度的本质，是它悄然关闭了 CSS 中最易被忽视却影响深远的“外边距塌陷”机制。理解这一底层逻辑，比记忆“Flex 会让子项变高”更有价值——它让你真正掌控布局的确定性。
