I am currently facing an issue where I have a div containing a table with overflow enabled, allowing the whole table to be viewed by scrolling. However, on Safari and mobile Safari browsers, there is a horizontal scroll on the html and body elements.
While the following solution works for Firefox and Chrome, it does not resolve the issue on Safari and has not been 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;
}
I am unsure of what other steps to take in order to address this issue.