Tworzenie flexboxa dziedziczy prawidłową szerokość w IE11

Question

Mamy szereg komponentów div, które mają być flex w IE11, zgodnie z tym samym zachowaniem w Chrome. W obrębie następującego skrzypca znajdują się elementy pola wyboru, które składają się na strukturę "kolumnową", a także elementy pola wyboru, które mają wypełnić całą szerokość rodzica.

Na drugim rzędzie, gdzie pełnej szerokości elementy checkbox rozpocząć, oczekuje się, że element jest zawinąć do następnego wiersza, ponieważ element .grid__item-flex ciągu przekracza ona dostępną dla niego szerokości w .grid__row kilka poziomów w górę. Jednak w IE11 szerokość ta przestaje być przestrzegana, a zatem .grid__item-flex nadal przepełnia szerokość elementu nadrzędnego.

Do potencjalnych rozwiązań, które zawiodły, należy wymuszenie szerokości na .grid__item-flex; gdzie dajemy mu 100% szerokości, ale zagnieżdżone elementy pola wyboru powyżej stracą swoją strukturę kolumny. Ponadto, max-width: 100% jako właściwość wydaje się być ignorowana, gdy zastosujemy ją do .grid__item-flex.

Czy istnieje rozwiązanie CSS, gdzie możemy zmusić .grid__item-flex do przestrzegania jego szerokość kontenera bez łamania zagnieżdżone kolumny nad nim, i upewnić się, że ostatni element wyboru (poniżej) pozostaje na tej samej linii?

The JSFiddle that replicates my problem can be found here. Przykład działa zgodnie z oczekiwaniami w Chrome.

---

Podsumowując, nie ma dwa przypadki, w których flexboxes musi pracować jednocześnie:

1) n liczba div z rzędu, że owija się na następnej linii, jeśli szerokość rzędu przekracza szerokość rodzica

• Możemy to osiągnąć stosując flex-wrap: wrap, ale tylko wtedy, gdy element ma prawidłową szerokość

2) div który zawija do następnej linii, jeśli jest to własny zawartość przekracza szerokość rodzica

---

Czego próbowałem:

• Rozszerzanie się skrótowym flex: 1 do swoich pełnych właściwości flex-grow flex-shrink flex-basis jako że "wartości domyślne IE10 i IE11 dla flex są 0 0 automatycznie zamiast 0 1 auto, zgodnie z projektem specyfikacji, od września 2013 r."

• używając dla IE schematu flexbox, jednak projekt jest no longer being maintained (i nie działa jako fix)

• Używanie PostCSS plugin dla Webpack że próby globalnego poprawkę korzystając flex: 1 1 0%

• Stosowanie width: 100% na div, które przepełnienie jego elementu nadrzędnego powoduje, że kolumny zagnieżdżone powyżej zamieniają się w jedną długą kolumnę, a więc mimo że częściowo rozwiązuje problem przepełnienia, w pierwszej kolejności eliminuje cel posiadania flexbox (ponieważ chcemy, aby jak najwięcej było divs, aby się zginać w rzędzie) .

Answer 1

Jeśli potrzebne jest rozwiązanie, które nie wiąże uznającą szerokość, udało mi się uzyskać tej pracy z kilkoma specyfikacji Flex

patrz przykład: https://jsfiddle.net/0ykq19um/

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

Do jawnie z IE,

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

Aby zezwolić na pełną szerokość i

.grid__row-overflow { 
    flex: 1 1; 
} 

nowej klasy w .grid__row.grid__row-md.parent otaczającej (potencjalnie) rozlanego wiersz.