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

Question

我正在尝试使用由 Media-body 和 Media-figure 组成的 Media object。 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 弹性收缩系数调整为 0（与我发布的 link 相反）。我假设 Media-figure 是固定大小的，如果空间太小，我们不想让它变小。

对 Media-body 使用 flex-basis: 0 应该将元素设置为没有初始大小，然后允许它消耗剩余的可用 space 因为它是唯一的元素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 浏览器的不同行为的任何情况？在这种情况下，这两个属性的行为似乎完全相同。

编辑：我发现了这个handy graphic，这似乎表明flex-basis 属性决定了space是分布在元素宽度之前还是之后被考虑在内（flex-basis: 0 vs flex-basis: auto）。

Answer 1

差异是由于 flex-basis 的值没有单位。添加这个（或省略 0）会给你在 IE 中的预期行为：updated fiddle

flex 上的 MDN 文档提到了这一点：

A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.

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

IE 10-11 flex-basis property behaves differently than webkit browsers

html

css

internet-explorer

flexbox

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

IE 10-11 flex-basis property behaves differently than webkit browsers

html

css

internet-explorer

flexbox

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