flexbox Überlauf auf Handy

Question

Ok. Ich versuche, ein einfaches kleines schiebendes Bildfeld zu bekommen.

Ich habe eine funktionierende Version. Mein Problem ist die Browserkompatibilität.

Es funktioniert gut auf Chrome Desktop. Auf Mobil- und Safari-Desktops verlieren die Bilder jedoch ihr Seitenverhältnis und sie versuchen sich miteinander zu quetschen.

Die HTML ist ziemlich einfach

<div class="slideshow"> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    ... 
</div> 

Gleiche mit dem CSS/SCSS

.slideshow { 
    display: flex; 
    overflow-x: scroll; 
    height: 300px; 
    img { 
    margin-right: 1em; 
    height: 100%; 
    } 
} 

Live Example

Versuchen Sie, dass die Post in Chrom Desktop und Safari Desktop anzeigen.

Chrome sollte alles reibungslos funktionieren.

Safari sollte alle Bilder anzeigen, die zusammengequetscht wurden.

Irgendwelche Lösungen? Oder vielleicht eine andere Möglichkeit, das gleiche Ergebnis wie im Chrome-Browser zu erzielen, aber auf allen/den meisten Plattformen?

Dank

Answer 1

gleiche Effekt erzielt, wenn Sie diese CSS

.slideshow { 
    height: 300px; 
    overflow-x: scroll; 
    white-space: nowrap; 
    img { 
    height: calc(100% - 4px); 
    } 
} 

calc(100% - 4px) y-Scrollbar

Live Example

Ja zu vermeiden. Ich habe meine eigene Frage beantwortet. Komm damit klar.