flex子项min-height失效的根本原因是父容器未提供高度上下文；需设父容器min-height（如100vh）、禁用align-items: stretch或加min-height: 0释放拉伸权限，并注意ie11兼容性问题。
Flex子项的min-height为什么算不出来
根本原因是父容器没提供可计算的高度上下文，min-height不是“强制拉伸”，而是“至少这么高”——它需要一个基准值来比对。如果父容器height是auto（比如普通div没设高），那子项写min-height: 200px就等于没写，浏览器按内容高度渲染，哪怕只有一行字。
实操建议：
- 用开发者工具检查父容器的
Computed → height：如果是auto或0px，问题就卡在这儿 - 给父容器加
min-height: 100vh（比height: 100%更可靠，不依赖html/body是否设高） - 临时加
border: 1px solid red看父容器是否视觉上“塌陷”了
align-items: stretch和min-height冲突怎么办
Flex子项默认会拉伸（align-items: stretch），但这个拉伸行为会压制min-height的生效逻辑——尤其当子项内容本身有固有高度（比如一张图片、一段文字）时，min-height只是“底线”，而stretch是“主动分配”，两者不协同。
实操建议：
- 想让
min-height真正起作用，先关掉拉伸：align-self: flex-start，再配min-height - 若仍需拉伸效果，改用
flex: 1+min-height: 0组合：min-height: 0释放拉伸权限，flex: 1接管空间分配 - 避免同时写
height: 100%和min-height——前者在无基准时算出0，还顺手封死拉伸
IE11和Chrome 72+对min-height的处理差异
IE11几乎忽略Flex子项的min-height，Chrome 72+则按规范修正了默认行为：子项有了min-height: auto（内容最小高度），flex: 1不再无条件拉伸，min-height容易被“内容高度”覆盖。
实操建议：
- IE11下别依赖
min-height，改用height+overflow: auto，或把min-height提到父容器上 - Chrome中若发现
flex: 1子项没拉满，显式加min-height: 0（不是min-height: auto） - IE11要兼容
flex: 1，必须拆成-ms-flex: 1; -ms-flex-shrink: 1; -ms-flex-basis: 0;
min-height在column方向Flex布局里容易搞反
竖排布局（flex-direction: column）时，主轴是垂直方向，align-items控制的是宽度，跟高度无关。这时候写align-items: stretch只会把子项拉宽，对高度没影响。
实操建议：
- 想让子项填满父容器高度，得靠主轴分配：
flex: 1或flex-grow: 1，而不是align-items - 父容器必须有明确高度（如
min-height: 100vh），否则flex: 1也无空间可分 - 避免在
column布局里给子项设height: 100%——它不会向上追溯，且可能触发min-height失效
min-height: 0这行样式——它不是“设个零”，而是解除浏览器对Flex子项的默认最小高度保护，让flex: 1真正能拉伸到底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
