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

我正在尝试使用 媒体对象，由一个 Media-body 和a Media-figure。 HTML和类遵循此形式（顺序无关紧要）。

.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-figure flex-shrink因子为0（与我发布的链接相反）。我假设那个 Media-figure 是一些固定的尺寸，如果我们的空间太小，我们宁愿不要把它缩小。

运用 flex-basis: 0 为了 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: 0 VS flex-basis: auto）。