IE 10-11 flex-basis属性的行为与webkit浏览器不同

Question

我正在尝试使用由a 和a 组成的Media对象.HTML和类遵循此形式(顺序无关紧要).Media-bodyMedia-figure

.Media
   .Media-figure
   .Media-body

简单的CSS是(没有前缀):

.Media { 
   display: flex 
}

.Media-figure {
   flex: 0 0 auto;

   /* same as...
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   */
}

.Media-body {
   flex: 1 1 0;

   /* same as...
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0;
   */
}

请注意,我正在将Media-figureflex-shrink因子调整为0(与我发布的链接相反).我假设这Media-figure是一个固定的大小,如果我们的空间太小,我们宁愿不要把它缩小.

使用flex-basis: 0for Media-body应该将元素设置为没有初始大小,然后允许它使用剩余的可用空间,因为它是唯一的元素flex-grow: 1.但是,在IE10-11中,flex-basis: 0导致Media-body宽度为内部元素的宽度,并且如果内容太多则会破坏任何包装行为.

http://jsfiddle.net/sgardn04/3enpp4wg/

(注意:如果你在chrome中查看它们,它们看起来完全一样.使用IE10-11!)

我目前的解决方法是设置Media-body { flex-basis: auto },这似乎有效.我假设IE在这里有问题,因为我更喜欢webkit浏览器的行为.是否有支持IE渲染的规范的合理解释？或者基于我在这里定义的类,我们可以期待webkit浏览器的不同行为的任何情况？在这种情况下,这两个属性似乎表现完全相同.

编辑:我发现这个方便的图形,似乎表明flex-basis属性决定是否考虑元素宽度之前或之后的空间分布(flex-basis: 0vs flex-basis: auto).

Answer 1

差异是由于没有单位的价值flex-basis.添加此(或省略0)可以在IE中获得预期的行为:更新的小提琴

MDN文档flex提到了这一点:

优选大小为0 必须具有一个单元以避免被解释为灵活性.省略时默认为0%.