Falsche Darstellung von Flexbox unter Safari

Hallo Leute,

ich habe aktuell ein Problem bei einer Webseite, wo ich absolut nicht mehr weiter weiß.
Ich habe einen Auszug des Quellcodes auf jsfiddle gestellt.

Sämtliche Browser die ich getestet habe (IE11, Chrome, FF, Edge) zeigen bei meinem Beispiel in der ersten "Zeile" 3 Bilder an und in der Zweiten 2 Bilder (so wie ich es auch haben will).
Safari (unter iOS) zeigt in der ersten "Zeile" 2 Bilder an und in der Zweiten 3 Bilder.

Warum??
Hat hier irgendjemand eine Idee, wo hier der Fehler begraben ist?

Besten Dank für eure Hilfe!

Patrick

P.S:
Ich weiß, dass man das Beispiel im Anhang auch anders lösen könnte.
Aber es handelt sich hierbei nur um einen Codeschnipsel von einem responsive Design. Und als Ganzes ergibt es dann wieder Sinn

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 346562

Url: https://administrator.de/forum/falsche-darstellung-von-flexbox-unter-safari-346562.html

Ausgedruckt am: 09.04.2025 um 19:04 Uhr

8 Kommentare

Neuester Kommentar

Wie immer: Wenn du uns die Seite zeigen würdest.

VG

Hallo,

Die Seite ist noch nicht online.
Ist der Quellcode auf jsfiddle zu wenig?

Grüße
Patrick

Mit 33,33333% passt das eben nicht mehr in die erste Zeile und das 3 Bild floatet in die nächste Zeile, mach 33% draus dann passts wieder.

Gruß

Danke dir.
Auf das bin ich auch schon gekommen.

Aber:

wenn 33,33333% zu viel für eine Zeile ist: warum haben dann in der zweiten Zeile 3 Bilder nebeneinander Platz?
warum kann jeder mit 33,33333% umgehen aber der Safari nicht? Müsste ja dann eigentlich ein Bug sein, oder?

Grüße
Patrick

Zitat von @Badger:

Danke dir.
Auf das bin ich auch schon gekommen.

Aber:

wenn 33,33333% zu viel für eine Zeile ist: warum haben dann in der zweiten Zeile 3 Bilder nebeneinander Platz?

Liegt am Floating und wie die Browser den Restplatz berechnen, bei den Apples ist das schon ewig so, wie bei allem immer eine Ausnahme ... Also Sicherheitsabstand einplanen oder auf das neue native flexible Gridsystem wechseln.