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 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浏览器的不同行为的任何情况？在这种情况下，这两个属性的行为似乎完全相同。

编辑：我发现了这个handy graphic，这似乎表明flex-basis属性确定是否在考虑元素宽度之前或之后分配空间（flex-basis: 0 vs flex-basis: auto）。

Answer 1

差异是由于flex-basis的值没有单位。添加此（或省略0）可以在IE中提供预期的行为：updated fiddle

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

0 的首选大小必须具有单位避免被解释为灵活性。默认为0％删去。

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

1 个答案: