Flexbox erben richtige Breite in IE11

Question

Wir haben eine Reihe von div Komponenten, die in IE11 flex sind nach dem gleichen Verhalten in Chrome sollen. Innerhalb der folgenden Geige finden Sie Checkbox-Elemente, die eine "Spalten" -Struktur bilden, sowie Checkbox-Elemente, von denen erwartet wird, dass sie die Breite des gesamten Elternteils füllen.

In der zweiten Zeile, in der die CheckBox-Elemente voller Breite beginnen, wird erwartet, dass das Element in die nächste Zeile springt, da das .grid__item-flex Element die in verfügbare Breite um ein paar Stufen übersteigt. In IE11 wird diese Breite jedoch nicht mehr eingehalten, und somit wird die Breite des übergeordneten Elements weiterhin übersteuert.

Mögliche Lösungen, die fehlgeschlagen sind, umfassen das Erzwingen einer Breite auf .grid__item-flex; wo wir es 100% Breite geben, aber die oben geschachtelten Checkbox-Elemente verlieren ihre Spaltenstruktur. Außerdem scheint max-width: 100% als eine Eigenschaft ignoriert zu werden, wenn wir es auf .grid__item-flex anwenden.

Gibt es eine CSS-Lösung, wo wir .grid__item-flex zwingen kann, seine Behälterbreite zu respektieren, ohne die verschachtelte Spalten darüber zu brechen, und stellen Sie sicher, dass das letzte Checkbox Element (darunter) auf der gleichen Linie bleibt?

The JSFiddle that replicates my problem can be found here. Das Beispiel funktioniert wie erwartet in Chrome.

---

Zusammenfassend gibt es zwei Fälle, in denen flexboxes gleichzeitig arbeiten muss:

1) n Anzahl von div in einer Reihe, dass, wenn Zeilenbreite überschreitet Eltern Breite

zu der nächsten Zeile umgebrochen

• Wir können dies flex-wrap: wrap mit erreichen, aber nur, wenn das Element richtige Breite

hat

2) div, die auf die nächste Zeile umgebrochen wird, wenn sie eigene Inhalte ist überschreitet Eltern Breite

---

Dinge, die ich versucht habe:

• Erweiterung der Kurzschrift aus flex: 1 in seiner vollen Eigenschaften flex-grow flex-shrink flex-basis wie "IE10 und IE11 Standardwerte für flex sind 0 0 auto anstatt 0 1 auto, wie der Entwurf spec, ab September 2013"

• Mit einem für IE Flexbox, aber das Projekt ist no longer being maintained (und als fix hat nicht funktioniert)

• ein PostCSS plugin für Webpack verwenden, die eine globale fix versucht flex: 1 1 0%

• width: 100% auf dem div Anwendung verwenden, Überläuft seine Eltern verursacht die oben geschachtelten Spalten in eine lange Spalte zu verwandeln, also obwohl es teilweise das Überlauf Problem behebt, vereitelt es den Zweck der Flexbox an erster Stelle (da wir so viele divs wie möglich in eine Reihe biegen wollen) .

Answer 1

Wenn Sie eine Lösung benötigen, die nicht erklärt Breite mit sich bringt, konnte ich diese Arbeit mit ein paar flex Spezifikationen erhalten:

Siehe Beispiel: https://jsfiddle.net/0ykq19um/

.grid__item-flex { 
    flex: 0 1 auto; 
} 

zu sein persönliches Vertrauen mit IE,

.grid__item-flex:only-child { 
    flex: 1 1 auto; 
} 

voller Breite zu ermöglichen, und

.grid__row-overflow { 
    flex: 1 1; 
} 

für eine neue Klasse auf dem .grid__row.grid__row-md.parent die die (potentiell) überquellende Reihe umgibt.