移动设备上的flexbox溢出

Question

好的。我正试图得到一个简单的图像滑动面板。

我有一个工作版本。我的问题是浏览器兼容性。

它在铬桌面上运行良好。但在移动和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示例

尝试在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示例

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