IE11中flex容器需同时设置height和min-height才能正常工作,仅min-height无效;子项需设min-height: 0解除默认min-height: auto锁定;IE10不支持flex容器min-height,须提至父元素或用height兜底。

IE11中min-height在flex容器上根本不起作用
不是写法错了,是IE11压根不把min-height当 flex 容器的高度锚点。它只认height——哪怕你写了min-height: 100vh,只要没配height,IE11就认为“这个容器高度还没确定”,后续的align-items、flex: 1全都会失效或偏移。
必须同时写height和min-height才能触发IE11的布局引擎
IE11需要明确的height值来启动 flex 主轴/交叉轴计算,min-height只是保底,不是起点。实操中要这样写:
-
height: 100vh—— 给出确定高度,让IE11能算出可用空间 -
min-height: 100vh—— 防止内容超长时被截断(比如弹窗里加了滚动条) - 避免用
height: 100%,IE11对百分比链断裂极其敏感,哪怕html和body都设了height: 100%,仍可能回退到auto
flex子项拉伸失败?先检查min-height: auto这个隐形敌人
IE11给所有 flex 子项默认加了min-height: auto,它会锁住子项最小高度不小于内容本身。结果就是flex: 1看起来完全没反应。
- 给子项显式加
min-height: 0,立刻解除锁定 - 不要依赖
height: 100%分配空间,IE11里它大概率算成0px - 若子项含图片或固定高元素,
min-height: 0+flex: 1是唯一稳定解法
IE10连flex容器上的min-height都不支持,得绕开
IE10根本不解析 flex 容器自身的min-height。你写上去,DevTools里能看到声明,但computed height还是0px。
立即学习“前端免费学习笔记(深入)”;
- 把
min-height往上提一级:加在 flex 容器的父元素上 - 或者改用
height: 200px+height: auto !important这种IE专属兜底写法 - 如果用了
display: inline-block或table-cell做父容器,直接切为display: block,这是最稳的兼容路径
height,flex行为就从第一步开始错位。


















