Question

我正在进行两列布局。两列都将显示iframe，两者的宽度将定义为CMS中的内联样式/设置。如果iframe小于列，则应垂直居中。如果它比柱大，它应缩小到柱的最大宽度，这几乎是50％宽。

（是的，这可能在不使用flexbox两次的情况下完成。但我对这些答案不感兴趣，因为我简化了示例和用例。）

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%进行修复。有关详细说明，请参阅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％。所以看起来一切都像预期的那样。

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

嵌套的flexboxes：IE11不尊重最大宽度：100％

1 个答案: