如何防止 safari 和移动设备上的 overflow-x答案

【问题标题】：How to prevent overflow-x on safari and mobile如何防止 safari 和移动设备上的 overflow-x
【发布时间】：2019-10-23 01:12:41
【问题描述】：

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

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

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

这是表格的属性

.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
}

不太确定还能尝试什么。

【问题讨论】：

标签： html css reactjs html-table react-bootstrap-table

【解决方案1】：

试试 100vw。那是视口，它不会比屏幕宽度大。

【讨论】：

100vw 将应用于哪个属性？编辑：效果很好，谢谢！
在你的情况下，我认为它会是：``` html, body { max-width: 100vw !important;溢出：隐藏！重要； } ``` 因为你不希望 html 和 body 比屏幕尺寸大。