Flex-Wrap funktioniert nicht wie erwartet in Safari

Question

Auf der Homepage von http://www.shopifyexperte.de/ befinden sich zwei Flex-Box Module, eins unter "Kundenstimmen" und eins unter "Neueste Beiträge ...". Die inneren Kästen sollen umhüllen, wenn sie unter 220px gehen und nicht über 30% Breite wachsen. Dies funktioniert in den neuesten Versionen von Chrome, FF und Opera (alle auf dem Mac), aber in Safari 8.0.5 (Mac) und jedem iOS-Browser bilden die Boxen keine Zeile, selbst wenn genug Platz ist. Sie wickeln sich immer, jeder für sich.

Die CSS für den Container:

.homepage-testimonial-container { 
 
\t display: flex; 
 
\t display: -webkit-flex; 
 
\t -webkit-flex: 1; 
 
\t flex: 1; 
 
\t -webkit-flex-direction: row; 
 
\t flex-direction: row; 
 
\t -webkit-flex-wrap: wrap; 
 
\t flex-wrap: wrap; 
 
\t -webkit-justify-content: space-between; 
 
\t justify-content: space-between; 
 
\t -webkit-align-items: flex-start; 
 
\t align-items: flex-start; 
 
\t margin-top: 1em; 
 
}

Die CSS für die Boxen im Inneren des Behälters:

.homepage-testimonial { 
 
\t margin-bottom: 1em; 
 
\t min-width: 220px; 
 
\t max-width: 30%; 
 
\t -webkit-flex: 1 1 auto; 
 
\t flex: 1 1 auto; 
 
}

Wenn ich d iseable -webkit-flex-wrap (setzt es effektiv auf nowrap), alle Felder reihen sich in einer Reihe auf, überlaufen aber den Container, wenn das Browserfenster zu eng wird.

Ist das eine Art Bug in Safari/Webkit oder mache ich hier etwas falsch?

Answer 1

Es scheint, dass dies ein Fehler in Safari ist. In einer separaten Ausgabe testete ich die minimale Breite anstelle von in Zeilen, in denen Sie etwas wie -webkit-flex: 1 1 auto; sagen.

Diese Frage hat einige Infos: https://stackoverflow.com/a/30792851/756329

Answer 2

Set Kind-Elemente wie das für mich flex-basis: 20em

flex: 1 0 auto; 

Answer 3

Einstellung scheint zu funktionieren funktioniert auch, min-width: 20em nicht.

Answer 4

Dies ist in der Tat ein Safari-Bug. Die Details sind im ausgezeichneten flexbugs Seite zur Verfügung, aber es zu zitieren:

Safari verwendet min/max Breite/Höhe Erklärungen für eigentlich die Größe von flex Produkte Rendering, aber es diese Werte ignoriert, wenn Berechnung, wie viele Artikel sollten in einer einzelnen Zeile eines Multi-Line-Flex Containers sein. Stattdessen wird einfach der Flex-Basiswert des Elements oder seine Breite verwendet, wenn die Flex-Basis auf Auto festgelegt ist.

So ist die fix/Abhilfe - wie hier von anderen Antworten vorgeschlagen - ist die flex-basis auf eine explizite Breite zu setzen, anstatt auto.

Answer 5

Ich hatte ein ähnliches Problem in Safari (9.1.3) mit dem Bootstrap 3 Grid-System (z. B. Col-Md-4) in Kombination mit Flex. Ich löste es, indem ich margin: 0 -1px; auf den Farbengegenständen und flex-wrap: wrap; auf dem Wrapper einstelle.

Answer 6

Ich benutze Safari 11.0.1 und der Fehler bleibt bestehen. Ich benutze Bootstrap 3 kombiniert mit display: flex auf meine .row-Elemente. Ich fügte folgend meinem css hinzu, um die Spaltenelemente anzustreben. Es scheint etwas über die Prozentsätze der Breite in Safari zu geben, die nicht korrekt berücksichtigt werden.

.row [class*=col-]{ 
    margin:0 -.3px; 
}