如何使溢出自动在 Safari 上工作答案

【问题标题】：How to make overflow auto working on Safari如何使溢出自动在 Safari 上工作
【发布时间】：2017-12-22 22:18:01
【问题描述】：

我尝试了许多浏览器，Firefox、Safari、IE10、Android 设备，都运行良好。但是当它变成 iOS 设备时，比如 iPad、iPhone，溢出就不起作用了。

.card.with-scroll .card-body {
  height: calc(100% - 44px);
  overflow-y: auto;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

只需在属性前添加 -wekit- 即可使其在 safari 中运行..！

.card.with-scroll .card-body {
  height: calc(100% - 44px);
  -webkit-overflow-y: auto; /* added css prefix for safari */
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

【讨论】：

【解决方案2】：

-webkit-overflow-scrolling: 触摸；

如果这不起作用，则应用于父元素。对我来说，它奏效了。

【讨论】：

【解决方案3】：

溢出：自动；和溢出：滚动；似乎在 iOS 和 OS X 上的工作方式不同。尝试使用溢出：滚动；加上-webkit-overflow-scrolling：触摸；在 iOS 和 OS X 上。

【讨论】：