min-height 失效主因是父容器无高度参照、flex 默认收缩、元素脱离文档流或 box-sizing 干扰；需检查父级高度、设 flex-shrink: 0、避免绝对定位/浮动，并统一 box-sizing: border-box。
父容器没设高度，min-height 就没参照物
min-height 是相对于包含块（containing block）计算的，如果父元素是 height: auto（默认值），且子元素又没撑开它，那子元素的 min-height 实际上“无处可伸”。常见于 flex 或 grid 容器未显式设高、或者父级是纯流式布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否设置了
height或min-height；若用display: flex，确保父容器有明确高度来源（比如height: 100vh或继承自 body） - 临时加
border: 1px solid red到父元素，看它是否真的“塌陷”了 - 在父元素上尝试
min-height: 0（对 flex item 有时能重置最小尺寸约束）
min-height 被 flex 的默认行为覆盖
Flex 项目默认有 flex-shrink: 1 和 flex-basis: auto，这会让它无视 min-height 主动收缩——尤其当容器空间不足时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给子元素加
flex-shrink: 0阻止压缩 - 或显式设置
flex-basis: 0+flex-grow: 1，再配合min-height - 更稳妥写法：
flex: 0 0 auto;<br>min-height: 200px;
绝对定位或浮动导致脱离文档流
一旦元素 position: absolute 或 float: left/right，它就不再参与常规高度计算，min-height 仍存在，但父容器不会为它预留空间，视觉上就像“失效”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认该元素是否被
position: absolute、fixed或float影响；可用浏览器开发者工具看 computed 样式里的position和display - 若必须绝对定位，父容器需额外设
min-height，或用top/bottom配合height: 100%模拟约束 - 浮动元素请优先改用
display: flex或grid替代
盒模型干扰：box-sizing 和内边距/边框
min-height 控制的是内容区 + 内边距 + 边框的总高度（取决于 box-sizing）。如果设了大 padding 或 border，又用了 box-sizing: content-box（默认），那实际占用高度会超出预期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
box-sizing: border-box到所有元素（推荐全局重置） - 检查
padding和border是否过大，导致内容被挤出可视区（此时不是min-height失效，而是内容溢出） - 用开发者工具的 layout 面板查看“actual height”，对比
min-height值是否真被突破
min-height 本身写错了，而是它所依赖的高度上下文被隐式破坏了——比如父级塌陷、flex 收缩、脱离流，这些比属性拼写更容易漏查。 
