css - 嵌套的 flexboxes : IE11 doesn't respect max-width: 100%

Question

我正在处理两列布局。两列都将显示一个 iframe，两者的宽度都将定义为内联样式/在 CMS 中设置。如果 iframe 小于列，它应该垂直居中。如果它比列大，它应该缩小到列的最大宽度，接近 50% 宽。

(是的，这可能不需要两次使用 flexbox 就可以完成。但是我对这样的答案不感兴趣，因为我简化了示例和用例。)

示例: http://jsbin.com/logifu/2/

HTML:

<div class="content">
  <div class="col">
    <div class="media-wrapper">
      <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width: 2000px; height: 2000px"></iframe>
    </div>
  </div>
  <div class="col">
    <div class="media-wrapper">
      <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width:200px"></iframe>
    </div>
  </div>
</div>

SCSS:

.content {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  height: 100%;
  min-width: 0; // this fixes the issue in FF 34

  + .col {
    margin-left: 40px;
  }
}

.media-wrapper {
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px;
  background: lightblue;
}

iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

这在 Chrome 39 中可以正常工作。在 Firefox 33 和 IE 10 中也可以。 (我很懒，所以我没有在 fiddle 中添加 IE10-flexbox 语法。) 在新的 FF34 中，它的行为与在 IE11 中相同，但这可以通过 max-width: 100% 来修复。参见 How can I get FF 33.x Flexbox behavior in FF 34.x?进一步解释。

遗憾的是，此修复不会影响 IE11。那么如何防止 IE11 显示大于列的 iframe？为什么会这样？这是一个错误，还是如链接问题中所述重新引入的另一个 flexbox 功能？

Answer 1

好的，我在 IE11 中找到了一种方法来防止这种情况:max-width: calc( 100% - 0.1px );。因此，最大宽度以像素而非百分比计算和解释，但接近 100%。所以在视觉上一切看起来都符合预期。

有人知道这个问题的更好解决方案或解释吗？