嵌套的flexboxes:IE11不尊重最大宽度: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中,这也有效.(我很懒,所以我没有在小提琴中添加IE10-flexbox语法.)在新的FF34中,它的表现与IE11相同,但这可以修复max-width: 100%.请参阅如何在FF 34.x中获得FF 33.x Flexbox行为？进一步解释.

不幸的是,此修复程序不会影响IE11.那么如何防止IE11显示大于列的iframe呢？为什么会发生这种情况; 这是一个错误还是另一个flexbox功能,如链接问题中提到的那样重新引入？

Answer 1

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

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