Es scheint ein Problem mit der Flexbox in Chrome zu geben, das Spalten mit variabler Höhe betrifft. Wenn sich der Inhalt dieser Spalten ändert, sollte die Größe der Spalte geändert werden, aber nicht
Ich habe hier eine JS-Geige erschaffen - Ссылка
Klicken Sie einfach auf die Schaltfläche "Inhalt entfernen", um zu sehen, was ich meine.
Dies ist das einfachste Beispiel für die Verwendung von flexbox zum Erstellen von Spalten, um zu demonstrieren, dass nichts anderes dafür verantwortlich ist.
%Vor%Ich bin mir ziemlich sicher, dass es sich um einen Bug in Chrome handelt, denn wenn Sie in Entwickler-Tools gehen und den Flex aus- und wieder einschalten, berechnet er die Höhe korrekt.
Ich habe hier einen Fehlerbericht eingereicht - Ссылка -
... aber ich habe keine Zeit zu warten, bis neue Versionen von Chrome veröffentlicht werden, also hoffte ich, dass jemand an eine clevere Lösung denken könnte. Vielleicht eine Art Javascript, das die Höhe des inneren Inhalts überwacht und eine Neuberechnung der Flexbox-Höhe anpasst?
Um in Chrome zu arbeiten, benötigt es eine Aktualisierung oder eine Art Reflow. DEMO
Wenn Sie mit dem Skript erzwingen, dass der Hauptcontainer neu berechnet wird, haben Sie etwas, das funktioniert. (das sieht aus wie ein sehr alter Fehler von Opera)
Um dies zu tun, können wir von Position static zu relativ wechseln und einen Pseudo verwenden, um etwas Inhalt einzufügen.
Der CLASS-Wrapper wird zu einer ID, mit der er einfach über JavaScript ausgewählt werden kann
%Vor%javaScript-Aktualisierung
%Vor%CSS-Aktualisierung:
%Vor% Eigentlich können Sie für .hidden und pseudo einfach:
Das funktioniert für mich:
%Vor%Siehe auch: Wie kann Ich erzwinge WebKit zum Neuzeichnen / Repaint, um Stiländerungen zu propagieren?
Tags und Links css google-chrome flexbox