【问题标题】：flexbox overflow on mobile移动设备上的 flexbox 溢出
【发布时间】：2016-07-25 10:52:57
【问题描述】：

好的。我正在尝试获得一个简单的小图像滑动面板。

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

它在 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 浏览器相同的结果但适用于所有/大多数平台的方法？

谢谢

【问题讨论】：

【解决方案1】：

如果你使用这个 CSS 可以达到同样的效果

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

calc(100% - 4px) 避免 y-scrollbar

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

【讨论】：