移动设备上的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

尝试在Chrome桌面和Safari桌面上查看该帖子。

Chrome应该让一切顺利。

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

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