嵌套弹性框：IE11 不考虑最大宽度：100%答案

【问题标题】：Nested flexboxes: IE11 doesn't respect max-width: 100%嵌套弹性框：IE11 不考虑最大宽度：100%
【发布时间】：2015-02-01 08:46:42
【问题描述】：

我正在处理两列布局。两列都将显示一个 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 功能？

【问题讨论】：

stackoverflow.com/q/42493626/3597276

标签： css internet-explorer-11 flexbox

【解决方案1】：

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

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

【讨论】：

max-width: 100% 在 IE11 中为我工作。 IE11 有一些关于 flex 的高度和宽度错误。当有最小高度但没有高度或没有设置宽度时，IE 11 会搞砸计算 flex 子项的正确尺寸。见flexbugs