How do I hide the horizontal, off-screen overflow of a `<div>` that has a large width set on it? For example:

HTML:

```
<div class="example">
</div>

```

CSS:

```
.example {
  height: 100px;
  width: 10000px;
  background-color: black;
  position: absolute;
  overflow: hidden;
}

```

[Here is an example fiddle](https://jsfiddle.net/uh8d2avo/5/) that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.

**Edit**: Adding hidden overflow-x on the parent element does not work on small width iOS devices.