为什么CSS设置Flex-basis在IE11计算高度错误_改用具体的Height定义-css教程-PHP中文网

ie11中flex-basis在column布局下失效，因其将auto解析为0，导致子项塌陷；须用flex-basis:0px+flex-grow:1+min-height:0，并配-ms-flex全声明及父容器交叉轴约束。

为什么css设置flex-basis在ie11计算高度错误_改用具体的height定义

IE11 里 flex-basis 不是用来“定义高度”的，它只是参与弹性计算的起点值；当用于垂直布局（flex-direction: column）时，flex-basis 控制的是子项的初始高度，但 IE11 对它的解析严重失准——直接设 flex-basis: auto 或省略，往往被当成 0，导致子项塌成一条线。

IE11 中 `flex-basis` 在 column 布局下为什么算不出正确高度

在 flex-direction: column 场景中，flex-basis 对应的是子项的初始高度，而非宽度。但 IE11 的渲染引擎不按标准走：

flex-basis: auto 被忽略或退化为 0px，内容高度无法作为基准
flex: 1 在 IE11 展开为 flex: 1 1 0（不是 auto），意味着“从 0 高度开始拉伸”，而若父容器没给交叉轴（即垂直方向）约束，它就真塌了
即使写了 min-height，IE11 也要求父容器有可测量的 height 或 min-height 才能触发计算，否则 min-height 形同虚设

为什么改用 `height` 不是解法，而 `flex-basis: 0px` + `flex-grow: 1` 才是

直接写 height: 100% 或 height: 100vh 给子项，在 Flex 容器内反而会锁死高度、禁用 align-items: stretch，且 IE11 对百分比高度继承逻辑极脆弱。真正可控的组合是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

flex-basis: 0px（显式带单位，防压缩工具误删；0% 在 Safari 里会被忽略，0 无单位在 IE 里可能被跳过）
flex-grow: 1（提供拉伸动力）
min-height: 0（关键！覆盖浏览器默认的 min-height: auto，否则内容仍会撑高）
父容器必须有交叉轴尺寸：哪怕只加 min-height: 1px，也能让 IE11 启动 stretch 逻辑

`-ms-flex` 声明顺序和前缀漏写是硬伤

IE10/11 不认标准 flex 属性，只识别 -ms-flex，且对参数顺序极其敏感：

-ms-flex: 1 可用，但 -ms-flex: 1 1 auto 在部分 IE11 版本会失效
必须写全：-ms-flex: 1 1 0px 或 -ms-flex: 1 1 0%（推荐 0%，因 -ms-flex-preferred-size 支持百分比更稳）
父容器漏掉 display: -ms-flexbox（IE10 必须）或 display: -ms-flex（IE11），所有子项的 -ms-flex 设置都无效
子项若含文字，顺手加 word-break: break-word，避免 IE11 因高度计算错误导致文字溢出

响应式切换时 `flex-basis` 不更新，必须显式重写

IE11 不会动态重算已应用的 flex-basis 值。比如桌面端设了 flex-basis: 50%，移动端媒体查询里只改 flex-direction 或 flex-wrap，IE11 仍沿用旧的 50%，造成错位。

每个断点里都要重复声明 flex-basis，例如：@media (max-width: 768px) { .item { flex-basis: 100%; -ms-flex-preferred-size: 100%; } }
用 33.333% 而非 33%，IE 对小数截断敏感，33% 可能被当成 0
如果子项含图片或长文本，优先用 max-width + 固定 flex-basis，别指望 flex-grow 自动均分高度

最易被忽略的一点：IE 中 flex-basis 生效的前提，是整套 Flex 上下文被正确识别——display: -ms-flexbox 写错位置、-ms-flex 参数顺序颠倒、漏掉 box-sizing: border-box 导致 padding 撑宽，都会让后续所有设置白忙一场。