İç içe yerleştirilmiş esnek kutular: IE11, maksimum genişliğe uymuyor:% 100

Question

İki sütun düzeni üzerinde çalışıyorum. Her iki sütunda bir iframe görüntülenir, her ikisinin genişliği de satır içi stil olarak tanımlanır/CMS'de ayarlanır. Iframe sütundan küçükse, dikey olarak ortalamalıdır. Kolondan daha büyükse, yaklaşık% 50 genişliğindeki kolonun maksimum genişliğine daralmalıdır.

(Evet, bu muhtemelen iki defa flexbox'a kullanmadan yapılabilir Ama örnek ve kullanma durumu basitleştirilmiş çünkü böyle cevapları ilgilenmiyorum..)

Örnek: 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; 
} 

Bu, Chrome 39'da beklendiği gibi çalışır. Firefox 33'te ve IE 10'da da bu çalışır. (Tembelim, bu yüzden IE10-flexbox sözdizimini kemanın içine eklemedim.) Yeni FF34'te IE11'de olduğu gibi davrandı, ancak bu max-width: 100% ile düzeltilebilir. Daha fazla açıklama için How can I get FF 33.x Flexbox behavior in FF 34.x?'a bakın.

Bu düzeltme, IE11'i etkilemez. Yani IE11'in iframe'i sütundan daha büyük göstermesini nasıl engellerim? Ve neden bu oluyor; Bu bir hata mıdır, yoksa bağlantılı soruda belirtildiği gibi yeniden sunulan bu başka bir esnek kutu özelliği mi?

Answer 1

Tamam, bunu IE11'de önlemek için bir yol buldum: max-width: calc(100% - 0.1px);. Bu nedenle, maksimum genişlik, yüzde cinsinden değil, piksel olarak hesaplanır ve yorumlanır, ancak yaklaşık% 100'dür. Yani görsel olarak her şey beklendiği gibi görünüyor.

Bu sorun için daha iyi bir çözüm veya açıklama yapan herhangi biri var mı?