Flexbox Überlauf Container Höhe in IE11

Question

Erstens möchte ich sagen, dass ich leider noch IE11 unterstützen muss und ich glaube nicht, dass dies eine doppelte Frage ist, obwohl ich ein paar gefunden habe, die ein bisschen ähnlich waren.

Ich habe ein einfaches modales Fenster, das 3 flexible Komponenten in einer Spalte, Kopfzeile, Fußzeile und Haupt enthält.

Der Plan ist, dass die äußere Box wächst, wenn der Inhalt wächst, bis es 80% der Höhe des Bildschirms ist, an welcher Stelle der mittlere Abschnitt des Modales, das auf Überlauf-y: auto gesetzt wird, erhalten soll Eine Bildlaufleiste und das Hauptmodal werden nicht größer.

Hier ist mein Markup

<div class="modal-wrapper"> 
    <div class="modal"> 
    <div class="modal-header">Header</div> 
    <div class="modal-main"> 
     <div>Content goes here, could get very long</div> 
    </div> 
    <div class="modal-footer">Footer</div> 
    </div> 
</div> 

Ziemlich Standard-Sachen. Das Modal ist auf Flex eingestellt und die Kopf- und Fußzeile sind fest eingestellt. Der mittlere Abschnitt soll so wachsen und schrumpfen, wie es nötig ist. Die Hauptsache ist, dass der .modal niemals den .modal-Wrapper überläuft.

Ich habe eine jsfiddle eingerichtet und es ist in Chrome, Firefox, Safari und iOS getestet und es funktioniert gut, wenn Sie die untere rechte Box Höhe nach oben und unten ziehen Sie sehen, wie es sich verhalten soll. IE11 ist allerdings ein Durcheinander.

https://jsfiddle.net/jonhobbs/sf6untnt/3/

Jetzt habe ich das Gefühl ein an die min-height Fehler hier bezogen werden:

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

aber ich bin nicht davon überzeugt, es ist genau das, dass Fehler, weil keine der Workarounds für diesen Bug scheinen zu funktionieren (zB mit min-height: 1px statt 0, Wrapping in einer anderen flexbox etc).

Hoffentlich auf jemand SO einen Blick auf die jsfiddle nehmen und sehen ein offensichtliches Problem

Answer 1

Vielleicht ein flex Kind, wenn Sie es machen und verwenden flex:0 1 80%;, sollte es Ihre Probleme mit IE fixe:

Beispiel

html, body{ 
 
    height: 100%; 
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 

 
.modal-wrapper{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    flex:0 1 80%;/* IE gets it , because the flow is column */ 
 
    max-height:80%;/* others such as FF gets it */ 
 
    background: white; 
 
} 
 

 
.modal{ 
 
    display: flex; 
 
    flex-glow: 1;/* doesn't exist */ 
 
    flex/*-shrink*/: 1; /* good enough */ 
 
    flex-direction: column; 
 
    min-height: 1px; 
 
} 
 

 
.modal-main{ 
 
    flex: 1;/* good enough */ 
 
    min-height: 1px; 
 
    overflow-y: auto; 
 
    padding: 20px; 
 
} 
 

 
.modal-header, .modal-footer{ 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    height: 60px; 
 
    color: white; 
 
    line-height: 60px; 
 
    text-align: center; 
 
    background: dodgerblue; 
 
}

<div class="modal-wrapper"> 
 
    <div class="modal"> 
 
    <div class="modal-header">Header</div> 
 
    <div class="modal-main"> 
 
     <div>This content could get very long so I'm going to put a big long div in it</div> 
 
     <div style=" width:100px; height:1000px; background-color:red; opacity:0.1;"></div> 
 
    </div> 
 
    <div class="modal-footer">Footer</div> 
 
    </div> 
 
</div>

https://jsfiddle.net/sf6untnt/7/