如何在 Safari 和移动设备上防止 overflow-x

Question

我目前有一个 div 包含一个 table，其中启用了溢出，并且可以通过滚动查看整个 table。问题是在 safari/mobile safari 上，html 和 body 有水平滚动。

以下方法适用于 firefox 和 chrome，不适用于 safari，也未在 IE 上测试。

html, body {
  max-width: 100% !important;
  overflow: hidden !important;
}

这是 table

的属性

.tableElements {
  margin: 5% auto;
  width: 80%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.tableElements table {
  width: 100%;
  overflow-x: scroll;
  display: block;
  table-layout: auto
}

不太确定还能尝试什么。

Answer 1

尝试使用 100vw。那就是带so的view port，不会超过屏幕宽度。