嵌套柔性盒：IE11不尊重最大宽度：100％

我正在处理两列布局。两列都将显示一个iframe，两者的宽度将被定义为内联风格/在CMS中设置。如果iframe小于列，它应该垂直居中。如果它大于色谱柱，它应该缩小到色谱柱的最大宽度，这个宽度接近50％。嵌套柔性盒：IE11不尊重最大宽度：100％

（是的，这也许可以不使用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%修复。进一步的解释请参阅How can I get FF 33.x Flexbox behavior in FF 34.x?。

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

来源

2014-12-03 chaenu

http://stackoverflow.com/q/42493626/3597276 – 2017-02-27 23:49:06

好的，我在IE11中发现了一种防止这种情况的方法：max-width: calc(100% - 0.1px);。因此，最大宽度以像素为单位进行计算和解释，而不是以百分比表示，但接近100％。因此，视觉上一切看起来都如预期。

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

来源

2014-12-04 08:28:06 chaenu

'max-width：100％'在IE11中为我工作。 IE11有一些关于flex的高度和宽度错误。当存在最小高度但不是高度或没有设定宽度时，IE 11拧紧计算柔性儿童的适当尺寸。参见[flexbugs]（https://github.com/philipwalton/flexbugs） – 2017-10-17 04:21:27

嵌套柔性盒：IE11不尊重最大宽度：100％

回答

相关问题