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

Question

我正在尝试使用 Media object , 由一个 Media-body 和一个 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 factor 调整为 0(与我发布的链接相反)。我假设 Media-figure 的大小是固定的，如果空间太小，我们不想让它变小。

对 Media-body 使用 flex-basis: 0 应该将元素设置为没有初始大小，然后允许它消耗剩余的可用空间因为它是唯一具有 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 属性决定了空间是在考虑元素宽度之前还是之后分配的(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.