Flexbox on table funktioniert nicht in Firefox

Das liegt daran, dass laut CSS-Tabellen anonyme Tabellenobjekte generiert werden sollten, wenn Tabellenelemente sind keine Kinder einer Tabelle:

Nach dem Flexbox Letzter Aufruf Arbeitsentwurf Es war diese anonyme Tabelle, die zum Flex-Element wurde, nicht die Tabellenzellen:

  

Einige Werte von display lösen die Erstellung von anonymen Boxen aus   um die Originalverpackung herum. Es ist die äußerste Box - das direkte Kind von   die Flex-Container-Box - das wird zu flex item . Zum   B. zwei zusammenhängende untergeordnete Elemente mit display: table-cell , die anonymous table wrapper box generated around   sie [CSS21] wird zu < a href="https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/#flex-item"> flex item .

Da die Tabellenzellen keine flexiblen Elemente waren, ignorierten sie die Eigenschaft flex . Es würde für die anonyme Tabelle gelten, aber CSS-Selektoren können keine anonymen Elemente auswählen.

Allerdings stimmte Chrome der Spezifikation nicht zu und entschied stattdessen, die Tabellenzellen zu blockieren.

Dann beschloss die CSS-Arbeitsgruppe , das Verhalten von Chrome zu standardisieren:

  

Wenn Sie einen Flex-Container haben und zwei Tabellenzellen darin einfügen, dann sind sie das   werden nicht unabhängig voneinander flex Elemente. Sie werden sich anonym einschreiben   Tisch und das wird flex.

     

Chrome hat es jedoch so implementiert, dass jedes Element unabhängig ist   ein Flex-Element. [...] So verwandelt es die Tabellenzellen in Blöcke.

     

Ich habe mindestens eine Präsentation auf einer Konferenz gesehen, an der sie teilgenommen haben   Vorteil, um ein Fallback-Verhalten für einen Flex zu schaffen. [...] Wenn du bist   Ich versuche nicht, einen Fallback auszulösen, ich weiß nicht, warum du einen Haufen davon gemacht hast   Tabellenzellen in Flex und in anonyme Sachen verpackt. [...]

     

BEHOBEN: Blockieren Sie einfach die Kinder von Flex- und Gittercontainern.   Mach keine anonyme Box-Reparatur

Die erste Flexbox-Kandidatenempfehlung wurde mit veröffentlicht diese neue Entschließung:

  

Einige Werte von display lösen normalerweise die Erstellung von aus   anonyme Boxen um die Originalverpackung. Wenn eine solche Box ein flex ist   Item , es wird zuerst blockiert, und so wird anonyme Box-Erstellung   nicht passieren. Zum Beispiel zwei zusammenhängende Flex-Elemente mit    display: table-cell wird zu zwei separaten display: block flex items , anstatt in eine einzige Verpackung zu verpacken   anonyme Tabelle.

Und dann hat Firefox das neue Verhalten ab Version 47 ( Bug 1185140 ) implementiert.

Bei älteren Versionen können Sie die Zellen manuell als Blöcke formatieren:

Ich glaube, das Problem betrifft den Standardwert display Ihrer Flex-Elemente.

Wenn Sie es mit display: flex überschreiben, sollte das Layout in allen Browsern funktionieren.

Nehmen Sie die folgenden Anpassungen vor:

Revised Codepen

Mein erster Gedanke war, dafür zu sorgen, dass für jeden td der richtige display Wert angewendet wurde - etwas in der Art von display: flex-item . % Co_de% existiert jedoch nicht, also habe ich flex-item verwendet.

BEARBEITEN

Die obige Lösung steht. Diese Änderung bezieht sich auf die Erklärung.

Bei der Überprüfung der Spezifikation scheint es, dass Flex-Elemente dies nicht tun habe sogar einen Standardwert display: flex . Nachdem Sie das Elternelement zu einem flexiblen Container gemacht haben, werden die untergeordneten Elemente zu Flex-Elementen und akzeptieren Flex-Eigenschaften, unabhängig von der verwendeten display -Regel. Daher ist eine Standardregel display nicht erforderlich.

In diesem Fall scheint es so, als ob display auf den Flex-Elementen deklariert werden muss, um Firefox und IE zum Laufen zu bringen.