手機上的flexbox溢出

Question

好的。我試圖讓一個簡單的小圖片滑動面板。

我有一個工作版本。我的問題是瀏覽器兼容性。

它可以在Chrome桌面上正常工作。但在移動和Safari桌面上，圖像失去了寬高比，他們試圖相互擠入。

的HTML是非常基本的

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

同樣與CSS/SCSS

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

Live Example

嘗試查看Google Chrome的桌面和Safari瀏覽器的桌面該職位。

鉻應該有一切工作順利。

Safari應顯示所有圖像擠在一起。

任何解決方案？或者，也許另一種方式可以產生與Chrome瀏覽器相同的結果，但適用於所有/大多數平臺？

感謝

Answer 1

同樣的效果，如果你使用這個CSS

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

calc(100% - 4px)避免的y滾動條

Live Example

是實現。我回答了我自己的問題。處理它。