IE11父级Flexbox不识别子级尺寸的兼容修复方案问询

你碰到的是IE11对Flexbox支持的一个经典坑——当外层Flex容器的子项（也就是那个紫色的.last容器）本身也是Flex容器，而且它内部的子按钮用了flex-basis: 0%时，IE11完全没法正确识别按钮里的内容宽度，直接把.last容器算成了宽度为0的空盒子，看起来就像消失了一样。

针对这个IE11专属的bug，我整理了几个实测有效的修复hack：

• 给.last容器加上min-width: 0：IE11对Flex容器的最小宽度有个奇怪的默认限制，手动设成0能打破这个限制，让它重新计算内部内容的宽度。
• 再给.last加个width: 1px：这一步是强制IE11给容器初始化一个基础宽度，配合它本身的flex-grow:1，就能让它扩展到和另外两个兄弟容器一样的宽度比例。
• 把.btn的flex-basis: 0%改成flex-basis: 0px：IE11对无单位的0%解析有问题，换成带单位的0px能让它正确识别这个值，保证按钮能平分.last的宽度。

修改后的完整代码如下：

HTML代码 #

<div class="container">
  <div class="first">
    <input type="text" />
  </div>
  <div class="empty"></div>
  <div class="last">
    <div class="btn">
      <div class="btn-inner"> first item item </div>
    </div>
    <div class="btn">
      <div class="btn-inner"> second item item </div>
    </div>
  </div>
</div>

CSS代码 #

.container { 
  display: flex; 
  background: #cccccc; 
  width: 50%; 
}
.container > * { 
  flex: 1 1 auto; 
}
.first { 
  background: #00ffff; 
}
.last { 
  background: #ff00ff; 
  display: flex;
  /* IE11修复hack */
  min-width: 0;
  width: 1px;
}
.btn { 
  /* 替换0%为0px，适配IE11 */
  flex: 1 1 0px; 
  display: flex; 
  height: 30px; 
}
.btn-inner { 
  flex: 1 1 0px; 
  background: rgba(0,0,0,0.2); 
  display: flex; 
}
.inner-inner { 
  flex: 1 1 auto; 
}

亲测这个方案能完美解决IE11里的显示问题，.last容器会正常显示紫色背景，内部的两个按钮也能平分宽度并展示内容，同时其他现代浏览器的显示效果不会受任何影响。

内容的提问来源于stack exchange，提问作者Иван Колосинский