flex: 1在卡片中不撑高是因为父容器未设display: flex、未指定flex-direction或卡片自身被min-height: auto锁定；需同时满足：父容器设flex+column、有高度来源、子项加flex: 1和min-height: 0。

为什么 flex: 1 在卡片里不撑高？

不是 flex: 1 失效，而是它根本没机会生效：父容器没设 display: flex，或没明确主轴方向（比如漏了 flex-direction: column），又或者卡片自身高度被内容“锁死”——浏览器默认给弹性子项加了 min-height: auto，哪怕内容只有一行，它也不肯压缩下去。

必须加的三个条件

让 .card-body 真正撑满剩余高度，得同时满足：

• .card 或其直接父容器（如 .col）设 display: flex; flex-direction: column;
• .card 或 .col 有可继承的高度来源，比如 h-100 + 父级设了 height: 100vh 或 min-height: 300px
• .card-body 加 flex: 1 和 min-height: 0 —— 后者常被忽略，但缺了它，内容少时就卡在一行高

flex: 1 和 height: 100% 别混用

height: 100% 要求整条祖先链都有明确高度，而实际项目中，.row、.col、组件包裹层往往没设高，一用就塌；flex: 1 只认直接父容器的剩余空间，不查祖先，更鲁棒。但注意：flex: 1 不是万能药，如果卡片内有 position: absolute 的按钮，它会脱离文档流，flex: 1 拉伸的是内容区，不是整个卡片视觉高度。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Bootstrap 场景下的典型写法

在 Bootstrap 5+ 中，别给 .card 加 flex-fill，它不起作用。正确路径是：

• 给 .col 加 h-100
• 给 .card 加 d-flex flex-column h-100
• 给 .card-body 加 flex-fill min-height: 0（flex-fill 就是 flex: 1）
• 确保 .row 有高度约束，比如 style="min-height: 400px" 或外层容器设 height: 100vh

最易被忽略的点：Grid 布局中 .col 默认 min-height: 1px，h-100 没东西可继承，高度就断在这里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！