手机上的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

是实现。我回答了我自己的问题。处理它。