flex-grow 不能直接推按钮到底部，必须确保卡片容器有明确高度（如min-height），且flex-grow作用于按钮的直接兄弟元素（内容区），而非任意包装层。
flex-grow 不能直接“推”按钮到底部
很多人以为给卡片容器设 display: flex; flex-direction: column;，再给内容区加 flex-grow: 1，按钮就能自动贴底——其实这只能让内容区“撑开”，按钮是否到底部，取决于父容器是否有明确高度约束。如果卡片本身没高度（比如 height: auto 或未设 min-height），flex-grow 根本没空间可长，按钮就还是按默认流式布局堆在内容后面。
常见错误现象：flex-grow: 1 加了但按钮纹丝不动；卡片在不同数据长度下底部错位；用 margin-top: auto 偶尔生效、换环境又失效。
- 必须确保卡片容器有明确的块级高度上下文，比如设
min-height: 200px或继承自父容器的height -
flex-grow要作用在「按钮之上的那个直接兄弟元素」上，不是任意一层包装 div - 避免对按钮本身设
margin-top: auto同时又设align-self: flex-end，二者冲突会导致行为不可预测
正确结构：容器 → 内容区（flex-grow: 1）→ 按钮
关键不在“怎么写 flex-grow”，而在“它该写给谁”。按钮必须是 flex 容器的直接子元素，且和内容区平级；内容区需要独占剩余空间，按钮才能被“挤”到最底。
典型结构：
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
min-height: 240px; /* 必须有最小高度 */
}
<p>.card-content {
flex-grow: 1; /<em> ✅ 作用于内容区 </em>/
}</p><p>.card-footer {
/<em> 按钮所在区域，不设 flex-grow </em>/
}如果内容区里还套了一层 wrapper（比如 <div class="inner">），<code>flex-grow: 1 却写在 wrapper 上——那它只撑开 inner，外层 card-content 仍塌陷，按钮照样浮不起来。
兼容性陷阱：IE11 对 flex-grow 的处理很特别
IE11 支持 flex-grow，但有个隐藏规则：如果父容器没有设定 flex-basis（哪怕只是 flex-basis: auto），flex-grow 可能完全不生效，或者表现成“把内容压扁”。这不是 bug，是它的 flex 算法差异。
- 稳妥写法：给内容区同时设
flex: 1 1 auto，等价于flex-grow: 1; flex-shrink: 1; flex-basis: auto - 避免只写
flex-grow: 1，尤其在需兼容 IE11 的项目中 - 如果卡片内有图片或 iframe，它们默认
flex-basis: auto，可能抢占空间，导致内容区无法伸展——此时可对图片加flex-shrink: 0
比 flex-grow 更稳的替代方案：margin-top: auto
当结构简单、按钮只有一个且位置固定时，margin-top: auto 实际更可靠。它不依赖父容器高度计算，只要容器是 flex，它就会把按钮“吸”到底部。
示例：
.card {
display: flex;
flex-direction: column;
min-height: 240px;
}
<p>.card-button {
margin-top: auto; /<em> ✅ 直接生效，无需 flex-grow </em>/
}注意点：
- 这个按钮必须是 flex 容器的直接子元素
- 不能和
align-self或justify-content混用，否则可能被覆盖 - 如果按钮需要居中或右对齐，用
text-align: right或margin-left: auto，别碰主轴对齐
实际项目里，margin-top: auto 往往比 flex-grow 更少出问题，但它只解决“单按钮贴底”这种场景；一旦要支持多按钮、响应式间距或动态内容高度判断，就得回到 flex-grow + 明确高度约束的老路上——这时候最容易漏掉的，就是那个不起眼的 min-height。
