display: flex 会为容器创建新的块级格式化上下文（BFC），从而阻止子元素的垂直外边距折叠，使 .card 真实包裹其内部内容（含 .card-bottom-container 的 margin），导致视觉高度显著增加。

flex 容器如何影响子项高度：揭秘 margin 折叠与布局上下文的关键作用

当你为 .cards-container 添加 display: flex 时，看似只是启用了弹性布局，实则触发了一个关键的 CSS 渲染机制变更：它自动创建了一个新的块级格式化上下文（Block Formatting Context, BFC）。这一变化不改变子项的显式尺寸声明（如 width: 250px 或 height: fit-content），却深刻影响了外边距（margin）的计算方式——尤其是垂直方向上的外边距折叠（margin collapse）。

在非 Flex 容器中（即 .cards-container 仅为普通 block 元素），.card-bottom-container 设置的 margin: 1rem 会与其父元素 .card 的边界发生外边距折叠：顶部和底部 margin 不再“撑开” .card 的高度，而是向外溢出，与相邻兄弟元素（若存在）或父容器边界合并。结果是 .card 的实际高度仅由其内部行内内容（如空 标签的默认行高）决定，视觉上显得“被压缩”。

而一旦 .cards-container 变为 display: flex，它立即成为一个 BFC 容器。此时，其直接子项（即 .card）的布局脱离了普通文档流的折叠规则——.card-bottom-container 的 margin 不再向外塌陷，而是被严格约束在 .card 的盒模型内部。.card 的高度因此真实响应 fit-content：从 .card-bottom-container 的上边距起，经标签容器内容，再到下边距止，完整包裹全部空间。这就是你观察到“高度变大”的根本原因。

✅ 正确实践建议如下：

• 优先用 padding 替代 margin 实现内边距（推荐方案）
  将 .card 的内边距逻辑前移，避免依赖外部折叠行为：

  .card {
    width: 250px;
    padding: 1rem; /* ✅ 替代子元素的 margin */
    border-radius: 30px;
    background-color: white;
  }
  .card > .card-bottom-container {
    margin: 0; /* 清除原 margin */
  }

• 或显式触发 BFC（不依赖 Flex）
  若暂不使用 Flex，可通过以下任一方式阻止 margin 折叠：

  .card {
    overflow: hidden;     /* 创建 BFC */
    /* 或 */
    display: flow-root;   /* 语义清晰的现代方案（Chrome 64+/Firefox 57+） */
  }

• 警惕 fit-content 的兼容性
  height: fit-content 在 Safari 旧版本中支持有限，生产环境建议降级为：

  .card {
    height: auto;           /* ✅ 宽泛兼容 */
    min-height: min-content; /* 或配合 -webkit-min-content 前缀 */
  }

? 总结：Flex 本身并不“主动拉伸”子项，但它通过创建 BFC 改变了整个布局上下文的规则。真正影响高度的，是外边距是否折叠、内容是否被真实包含。理解这一点，就能精准控制容器高度行为——无需魔改 Flex 属性，只需厘清 margin/padding 的语义边界与格式化上下文的触发条件。