Wie bekomme ich FF 33.x Flexbox-Verhalten im FF 34.x?

Verwenden wir flexbox stark für eine desktop-Anwendung wie suchen die web-app und es hat toll.

Aber mit der neuesten Firefox-Developer Edition (35.0a2) das layout verhält sich nicht wie erwartet (es wächst über den viewport): http://tinyurl.com/k6a8jde

Dies funktioniert gut in Firefox 33.1.

Ich würde annehmen, das hat etwas zu tun mit der flexbox hier beschriebenen änderungen:
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

Aber leider kann ich noch nicht herausfinden, einen Weg, um den FF 33.x Verhalten in FF 34 oder 35.x.

Jede Hilfe in Bezug auf das layout oder wie man besser das problem einzugrenzen geschätzt wird.

InformationsquelleAutor Timm | 2014-11-12
  1. 70

    Relevanten Unterschied gibt, ist die "implizite Mindestgröße von flex-items", ein neues feature in der flexbox-spec. (oder eher, ein feature, das entfernt wurde und wieder eingeführt)

    Die einfachste (bluntest) Weg, um das alte Verhalten wiederherzustellen ist das hinzufügen dieser Stil-Regel: * { min-height:0 } (oder min-width, wenn Sie waren besorgt über den überlauf in eine horizontale flexbox; aber es sieht aus wie Ihre testcase hat nur ärger mit überlauf aus eine vertikale flex-container).

    Aktualisiert fiddle, mit dieser änderung:
    http://jsfiddle.net/yoL2otcr/1/

    Wirklich, Sie sollten nur benötigen, um min-height:0 auf bestimmte Elemente -- insbesondere, müssen Sie auf jedes element, daß:

    1. ist ein Kind von einer 'Säule'-orientierten flex-container

    2. ist ein großer Nachkomme, Sie zu ermöglichen überlauf (die vielleicht behandelt werden, die sich anmutig durch ein zwischenelement mit "overflow:scroll", wie es hier der Fall ist)

    (In Ihrem Fall, es gibt tatsächlich eine verschachtelte Stapel von diesen Elementen, da Sie eine single groß-element in der viele verschachtelte flex-Containern. So müssen Sie wahrscheinlich ein min-height:0 alle Weg, leider.)

    (Wenn Sie neugierig, dieser bug hat mehr Informationen & mehr Beispiele für Inhalt, der defekt war auf das web durch diese spec-änderung: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )

    • Vielen Dank für die vorgeschlagenen zu beheben. Ich war in der Lage, das gewünschte Verhalten in FF 33 FF, 35, und kann nun ruhig auf den Grund und wechseln Sie zur Verwendung dieses nur dort, wo unbedingt nötig.
    • Ich hatte ein ähnliches Problem mit einer Reihe von flex-Elemente enthielt eine dynamische Anzahl von Bildern. Die Bilder skaliert, aber seit FF 34 Sie wurden überlaufen des Behälters. In meinem Fall musste ich auch einstellen min-width:0 auf der flex-Elemente.
    • Yup -- es hängt davon ab, auf welche Weise Sie Ihre flex-container orientiert. Für flex-direction:row (Standard), würden Sie wollen zu setzen min-width:0 auf seine Kinder, explizit zu erlauben, Sie zu schrumpfen unterhalb der min-Größe des Inhalts. Für flex-direction:column wollen Sie min-height:0 auf seine Kinder. (Wenn Sie Zweifel haben, obwohl, sollte es in Ordnung sein, um sowohl min-width & min-height auf 0, solange dabei nicht stomp auf einemin-width Wert, den Sie an anderer Stelle in Ihrem Stile & abhängen-diese Eigenschaften traditionell hatte die 0 als ersten Wert.)
    InformationsquelleAutor dholbert
  2. 2

    keines dieser Updates hat bei mir, obwohl Sie arbeiten. In meinem Fall war ich der Lieferung einer display: table-cell fallback, die schien zu übernehmen. Mit SASS, einschließlich, wie diese, der fallback funktioniert für den IE, ohne die FF:

    flex: auto; //or whatever   
.ie & {
  display: table-cell;
}
    • Ich bin nicht einverstanden, es ist in der Tat die Frage beantworten, die für einen bestimmten Anwendungsfall (wenn Sie haben ein fallback für IE, aber immer noch wollen, die gewünschte Funktionalität in FF)
    • mm du hast Recht, sorry! Ich bin löschen Sie den vorherigen Kommentar.
    InformationsquelleAutor mlaroy
  3. 0

    Es ist einfacher als das
    So geben Sie die flex-Kinder 

    .flex-child {
  flex: 1;
  overflow: hidden;
}

    ohne Verwendung min-width: 0 hack

    InformationsquelleAutor Maged Mohamed
Schreibe einen Kommentar