IE11中min-height在Flex容器内失效，需改用height+overflow: auto或设父容器min-height并子项flex-shrink: 0；flex: 1须替换为-ms-flex: 1；align-items: stretch需父有height且子无height/max-height；column方向滚动异常应设子项-ms-flex: 1 1 0。
IE11里min-height在Flex容器中完全失效怎么办
IE11的Flex实现对min-height支持极差——即使父容器设了display: flex，子元素的min-height也常被忽略，表现为内容塌缩、高度不撑开。
根本原因是IE11把min-height当作“建议值”而非约束条件，尤其当子项是flex: 1或未显式设height时更明显。
- 临时解法：把
min-height挪到父Flex容器上，同时给子项加flex-shrink: 0防止压缩 - 更稳方案：用
height替代min-height，再配合overflow: auto处理溢出（适用于高度可预估的场景） - 慎用
min-height: 100%：IE11需要父级有明确height才生效，且不能跨多层Flex嵌套传递
IE11不识别flex: 1或flex: auto怎么写等效代码
IE11只认老式Flex语法（2012草案），flex: 1会被直接忽略，导致子项不伸缩、布局错乱。
必须手动拆解为三个独立属性，并使用-ms-前缀：
立即学习“前端免费学习笔记（深入）”；
.item {
-ms-flex: 1; /* IE11等效于 flex: 1 */
flex: 1; /* 标准浏览器 */
}
/* 或更精确控制 */
.item {
-ms-flex-positive: 1;
-ms-flex-negative: 1;
flex-grow: 1;
flex-shrink: 1;
}-
-ms-flex: 1是IE11唯一可靠写法，不要混用flex-basis值（如-ms-flex: 1 1 auto在部分IE11版本会失效） - 避免
flex: auto，IE11无对应-ms-属性，需改写为-ms-flex: 1 1 auto并测试是否触发收缩 - 如果子项含文字，记得加
word-break: break-word，否则IE11可能因flex计算错误导致文字溢出容器
IE11下align-items: stretch不拉伸子项高度的原因和修复
标准浏览器中align-items: stretch会让子项填满Flex容器交叉轴，但IE11经常让子项保持自身内容高度，尤其当子项是div且无显式height时。
这不是bug，而是IE11对“stretch”的定义更严格：它要求子项**不能有块级高度约束**（比如height、max-height），且父容器必须有明确交叉轴尺寸（如height或min-height）。
- 给父Flex容器加
height: 100%或固定height（哪怕只是height: 1px也能触发stretch） - 子项移除所有
height/max-height，改用min-height+flex-shrink: 0 - 若子项是表单控件（如
input），IE11默认设了height，需重置：input { height: auto; min-height: 1.2em; }
为什么flex-direction: column在IE11里常导致滚动条异常
IE11对列方向Flex的交叉轴计算有偏差，尤其当容器设了min-height又含overflow: auto时，滚动区域可能无法正确识别内容高度，出现滚动条消失或永远显示。
关键点在于IE11把min-height当作“最小可用空间”，而非“最小内容高度”，所以当内容不足时，它不会主动撑开可滚动区域。
- 强制触发滚动计算：给子项加
-ms-flex: 1 1 0（注意第三个参数必须是0，不能是auto） - 避免在列容器上同时用
min-height和height: 100%，IE11会优先按height计算，min-height失效 - 如果容器内有绝对定位元素，IE11可能忽略其对高度的影响，需额外用空
div占位或JS补高
IE11的Flex兼容性问题大多源于它把“弹性”理解成“可选收缩”，而不是“强制分配”。真正稳定的做法不是堆砌前缀，而是用最简的-ms-flex组合+显式尺寸约束，再辅以边界情况的CSS兜底。那些看似优雅的现代写法，在IE11里往往第一个掉链子。
