How to prevent overflow-x on safari and mobile

Question

I currently have a div containing a table, within which overflow is enabled and the whole table can be viewed by scrolling. The problem is that on safari/mobile safari, the html and body have a horizontal scroll.

The following approach works for firefox and chrome, does not work on safari and not tested on IE.

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

Here are the properties of the 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
}

Not really sure what else to try.

Answer 1

Try with 100vw. That is the view port with so, it won't get bigger than the screen width.