嵌套的flexboxes：IE11不尊重最大宽度：100％ [英] Nested flexboxes: IE11 doesn't respect max-width: 100%

问题描述

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

（是的，这可能不使用flexbox两次，但我对这样的答案不感兴趣，因为我简化了这个例子和用例。）
$ b

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

HTML：

 < div class =content> 
< div class =col> 
< div class =media-wrapper> 
< iframe src =http://www.jsbin.com/blogframeborder =0scrolling =nostyle =width：2000px; height：2000px>< / iframe> 
< / div> 
< / div> 
< div class =col> 
< div class =media-wrapper> 
< iframe src =http://www.jsbin.com/blogframeborder =0scrolling =nostyle =width：200px>< / iframe> 
< / div> 
< / div> 
< / div> 
  

SCSS：

  .content {
 display：flex; 
 justify-content：center; 
 flex-flow：换行; 
} 
 
 .col {
 display：flex; 
 justify-content：center; 
 align-items：flex-start; 
 flex：1; 
身高：100％; 
 min-width：0; //解决了FF 34 
 
 + .col {
 margin-left：40px; 
} 
} 
 
 .media-wrapper {
 box-sizing：border-box; 
最大宽度：100％; 
 padding：15px; 
 background：lightblue; 
} 
 
 iframe {
 display：block; 
 margin：0 auto; 
最大宽度：100％; 
 overflow：hidden; 
 
 
 
 $ b $ p 
 $ b 
在Chrome 39中可以正常工作。在Firefox 33和IE 10中，作品也是。 （我很懒，所以我没有在小提琴中添加IE10-flexbox语法。）
在新的FF34中，它的行为与IE11中的一样，但是可以用最大宽度：100％。请参阅如何获得FF 33.x Flexbox在FF 34.x中的行为？进一步的解释。
 
 
 
不幸的是，这个修复不会影响IE11。那么如何防止IE11显示大于列的iframe呢？为什么会这样呢？这是一个错误，或者是这是另一个flexbox-功能，被重新引入如链接的问题中所述？
解决方案
好吧，我发现一个方法来防止在IE11中： max-width：calc（100％ -  0.1px）; 。因此，最大宽度的计算和解释像素，而不是百分比，但接近100％。因此，视觉上看起来一切都如预期。
 
 
 
有谁知道这个问题的更好的解决方案或解释？
I'm working on a two column layout. Both columns will display an iframe, the width of both will be defined as inline-style / be set in the CMS. If the iframe is smaller than the column, it should center vertically. If its bigger than the column, it should shrink to the max width of the column, which is nearly 50% wide.

(Yes, this could probably be done without using flexbox twice. But I'm not interested in such answers, because I simplified the example and the use case.)

Example:
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;
}
This works as expected in Chrome 39. In Firefox 33 and in IE 10 this works, too. (I'm lazy, so I didn't add the IE10-flexbox syntax in the fiddle.)
In the new FF34 it behaved the same as in IE11, but this could be fixed with max-width: 100%. See How can I get FF 33.x Flexbox behavior in FF 34.x? for further explanation.

Unfortunately, this fix does not affect IE11. So how do I prevent IE11 displaying the iframe larger than the column? And why is this happening; is this a bug or is this another flexbox-feature that was reintroduced as mentioned in the linked question?
解决方案
Ok, I found a way to prevent this in IE11: max-width: calc( 100% - 0.1px );. Therefore the max-width gets calculated and interpreted in pixel and not in percent, but is nearly 100%. So visually everything looks as expected.

Does anyone know a better solution or an explanation for this problem?

                        
这篇关于嵌套的flexboxes：IE11不尊重最大宽度：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！