min-height 失效的根本原因是父容器未允许其生效。常见原因包括父容器设 height/max-height、flex 布局默认 stretch、absolute 定位包含块高度为 0、height 与 min-height 冲突、max-height 缺少 overflow 控制、表格单元格需嵌套 div、移动端应优先用 100dvh 而非 100vh，以及动画不可用 max-height: auto。
min-height 为什么写了却没撑起来？
根本原因不是属性写错了，而是父容器没给它“放行”的机会。它不是增高指令，而是一条底线——只有当内容撑不开、父容器又允许时，才真正起作用。
常见失效场景：
- 父容器设了
height: 200px或max-height: 200px，子元素再怎么声明min-height: 300px也突破不了上限 - 父容器是
display: flex且没改align-items，子项默认被stretch拉满，min-height根本没机会触发 - 子元素用了
position: absolute，它的包含块可能是第一个非static祖先，而那个祖先高度为 0，min-height就只能在 0 高度的框里生效 -
height和min-height同时写：若height: 150px; min-height: 300px，浏览器会按min-height执行；但若height: 350px; min-height: 300px，min-height就被无视了
max-height 不加 overflow 就等于没限制
只写 max-height: 200px，超出内容不会自动滚动，也不会隐藏——它只是“不许更高”，但溢出行为完全由 overflow 决定。
必须显式控制溢出方式：
立即学习“前端免费学习笔记（深入）”；
-
overflow-y: auto是最稳妥选择：超限时出滚动条，不超时无滚动条，视觉干净 -
overflow: hidden仅适用于你明确接受内容被截断的场景（比如卡片摘要预览） - 在
flex容器中，若子项需滚动，父容器最好设min-height: 0或overflow: hidden，否则flex的默认拉伸逻辑会干扰子项的max-height生效
表格单元格（<td>）里设 min-height 失效怎么办？
<td> 和 <th> 有自己的一套尺寸计算逻辑，直接在它们上面写 min-height 基本无效，哪怕 DevTools 显示样式已计算。
正确做法是包一层容器：
- 在外层
<td>内部加一个<div> - 把
min-height、max-height和overflow全部移到这个<div>上 - 确保
<td>本身没设height或max-height，让它保持height: auto
移动端用 vh 单位要小心软键盘
写 min-height: 100vh 做全屏容器，在 iOS Safari（尤其旧版）里，软键盘弹出会把 vh “冻住”，导致底部大片空白——因为视口高度没重算。
解决方案很明确：
- 优先用
min-height: 100dvh（dynamic viewport height），它是为这种场景设计的标准单位 - 兼容写法是叠加声明：
min-height: 100vh; min-height: 100dvh;，老浏览器忽略dvh，新浏览器用dvh - 如果要做展开/收起动画，别碰
max-height: auto——浏览器不支持从固定值到auto的过渡；得用具体数值（如max-height: 500px）配合transition
真正卡住人的从来不是属性本身，而是它和父容器、定位、布局模式、设备行为之间的耦合关系。写完 min-height 或 max-height 后，第一反应不该是检查自己语法，而是打开 DevTools 查父级的 height、display、position 和 overflow。这些地方不动，光调子元素毫无意义。
