IE überlappen flexbox wenn Mediengröße der Seite

Question

Ich benutze die Flexbox für die Anzeige einer Vielzahl von Elementen, wo das Layout basierend auf der Bildschirmgröße geändert wird, um auf Geräten zu funktionieren. In Chrome wird alles wie erwartet angezeigt, IE überschneidet sich jedoch, wenn von der größten Größe zur mittleren Größe gewechselt wird. Ich habe es geschafft, dies in jsfiddle zu replizieren.

Fiddle: https://jsfiddle.net/c7xmfyd3/5/

span { display: inline-flex; } 
.max-width { width: 100%; } 

#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; } 

.box { border: 0.75pt solid #aaaaaa; margin: 0pt 5pt 11pt 0pt; flex:auto; } 
.box { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; box-shadow: 0pt 2.2pt 4pt #aaaaaa; } 
    .box .content { padding: 0pt 4pt 0pt 4pt; } 
    .box .title { background: #0094ff; color: white; padding: 4pt; font-variant: small-caps; -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; } 
    .box p { color: #333; padding: 7.2pt; } 

.metricbox { border: 0.75pt solid; width: 72pt; height: 49pt; margin: 2pt; display: inline-block; position: relative; } 
.metricbox { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; -moz-border-radius-bottomright: 4pt; -moz-border-radius-bottomleft: 4pt; -webkit-border-bottom-right-radius: 4pt; -webkit-border-bottom-left-radius: 4pt; border-bottom-left-radius: 4pt; border-bottom-right-radius: 4pt; } 
    .metricbox .content { text-align: center; font-weight: bold; font-size: 15pt; padding: 3pt; } 
    .metricbox .item { font-size: 8pt; color: black; font-weight: bold; text-transform: uppercase; width: 100%; text-align: center; position: absolute; bottom: 0; } 

.mb-base { border-color: black; color: black; } 
.mb-good { border-color: #339933; color: #339933; } 
.mb-bad { border-color: #ff0000; color: #ff0000; } 
.mb-test { border-color: #e18412; color: #e18412; } 

/*Used to modify display as screen sizes change*/ 
.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; } 
.flex-3 { align-content:flex-start; } 
.flex-stack { flex-direction: column; } 

/*Media widths originally: 450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */ 
@media screen and (min-width: 72pt) { 
    #canvasMap { width: inherit; } 
    .flex-123 { flex-direction: column; } 
    .flex-12 { flex-direction: column; } 
    .flex-3 { flex-direction: column; } 
} 

/*@media screen and (min-width: 758px) {*/ 
@media screen and (min-width: 432pt) { 
    #canvasMap { width: 288pt; } 
    .flex-123 { flex-direction: column; } 
    .flex-12 { flex-direction: row; } 
    .flex-3 { flex-direction: row; } 
} 

@media screen and (min-width: 710pt) { 
    #suppliermetrics { min-width: 168pt; } 
    .flex-123 { flex-direction: row; } 
    .flex-12 { flex-direction: row; } 
    .flex-3 { flex-direction: row; } 
} 

ich eine Vielzahl von flexiblen Einstellungen versucht haben, wie in der Forschung empfohlen, aber kein Glück.

Jede Rückmeldung wird geschätzt.

Answer 1

Nach ausgiebigen Versuch und Irrtum habe ich das Problem endlich gelöst, so dass IE sich wie gewünscht verhält und wie in Chrome gesehen. Das CSS benötigte kleinere Verbesserungen zusammen mit einem zusätzlichen Kind-Flex-Container (flex-1) und einem Umbenennen von flex zu flex-2.

Der Konflikt trat auf, weil feste Breiten für #canvasmap und #suppliermetrics festgelegt wurden. IE konnte die Dimensionierung der Flex-Container nicht genau bestimmen. Wenn die Dimensionierung spezifisch für die Flex-Container (flex-1 & flex-2) definiert ist, scheint IE wie gewünscht zu funktionieren.

---

Zusammenfassung der Änderungen:

Es gibt drei Hauptblöcke flex: flex-1, Flex-2 und 3-flex. Ein zusätzlicher Container existiert (flex-12), der sich um flex-1 und flex-2 wickelt. Der äußere Flex-Container ist flex-123. Der Flex-Block (flex-12) wurde aktualisiert, so dass jedes untergeordnete Element mit einem eigenen Flex-Container definiert wurde.

• Flexbehälter (flex-1) wurde hinzugefügt.
• Der Flex-Container "flex" wurde in "flex-2" umbenannt.
• Drei Haupt-Flexblocks (flex-1, flex-2, flex-2_ wurden mit Flex-Richtung definiert: Zeile
• CSS: #canvasmap width wurde von 288pt in 'inherit' geändert. Breite für flex-1 wurde für die mittlere Bildschirmgröße eingestellt und 'unset' für die kleinste Bildschirmgröße
• Die Flex-Container Flex-12 Breite wurde auf der größten Bildschirmgröße auf "
• " Auto Flex eingestellt -3 Breite wurde auf 100% auf der größten Bildschirmgröße eingestellt
• Der mittlere Flex-Block (Flex-2) hat minimale Breite von 168pt für die größte Bildschirmgröße und ist für den mittleren Bildschirmgröße 'Unset'

---

Fiddle Auflösung: https://jsfiddle.net/c7xmfyd3/6/

/*#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }*/ 
#canvasMap { height: 288pt; width: inherit; margin: 0pt; padding: 0pt; } 

/*Used to modify display as screen sizes change*/ 
/*.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }*/ 
/*.flex-3 { align-content:flex-start; }*/ 
.flex-123, .flex-12, .flex-2, .flex-3, .flex-stack { display: flex; align-items: stretch; } 
.flex-1, .flex-2, .flex-3 { flex-direction: row; } 
.flex-stack { flex-direction: column; } 


/*Media widths originally: 450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */ 
@media screen and (min-width: 72pt) { 
    /*#canvasMap { width: inherit; }*/ 
    .flex-123 { flex-direction: column; } 
    .flex-12 { flex-direction: column; } 
    .flex-3 { flex-direction: column; } 
    .flex-1 { min-width: unset; } 
} 


@media screen and (min-width: 432pt) { 
    /*#canvasMap { width: 288pt; }*/ 
    .flex-123 { flex-direction: column; } 
    .flex-12 { flex-direction: row; } 
    .flex-1 { min-width: 288pt; } 
    .flex-2 { min-width: unset; } 
    /*.flex-3 { flex-direction: row; }*/ 
} 

@media screen and (min-width: 710pt) { 
    /**#suppliermetrics { min-width: 168pt; }*/ 
    .flex-123 { flex-direction: row; } 
    .flex-12 { flex-direction: row; } 
    /*.flex-3 { flex-direction: row; }*/ 
    .flex-12 { width: auto; } 
    .flex-3 { width: 100%; } 
    .flex-2 { min-width: 168pt; } 
}