Zagnieżdżone flexboksy: IE11 nie uwzględnia szerokości maksymalnej: 100%

Question

Pracuję nad układem dwóch kolumn. W obu kolumnach pojawi się element iframe, a szerokość obu zostanie zdefiniowana w stylu CMS. Jeśli element iframe jest mniejszy niż kolumna, powinien być wyśrodkowany w pionie. Jeśli jest większy niż kolumna, powinien skurczyć się do maksymalnej szerokości kolumny, która jest prawie 50% szeroka.

(tak, to prawdopodobnie może być wykonane bez użycia schematu flexbox dwa razy, ale nie jestem zainteresowany w takich odpowiedzi, bo uproszczony przykład i przypadek użycia.).

Przykład: 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; 
} 

To działa zgodnie z oczekiwaniami w Chrome 39. W Firefoksie 33 i IE 10 to też działa. (Jestem leniwy, więc nie dodałem składni IE10-flexbox w skrzypcach.) W nowym FF34 zachowywał się tak samo jak w IE11, ale można to naprawić za pomocą max-width: 100%. Więcej informacji można znaleźć w dokumencie How can I get FF 33.x Flexbox behavior in FF 34.x?.

Niestety, ta poprawka nie wpływa na IE11. Więc w jaki sposób mogę zapobiec wyświetlaniu iframe w IE11 większym niż kolumna? I dlaczego tak się dzieje; czy jest to błąd, czy jest to kolejna funkcja flexbox, która została przywrócona, jak wspomniano w połączonym pytaniu?

Answer 1

Ok, znalazłem sposób, aby temu zapobiec w IE11: max-width: calc(100% - 0.1px);. Dlatego maksymalna szerokość jest obliczana i interpretowana w pikselach, a nie w procentach, ale wynosi prawie 100%. Wizualnie wszystko wygląda zgodnie z oczekiwaniami.

Czy ktoś zna lepsze rozwiązanie lub wyjaśnienie tego problemu?