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

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