title: Hide horizontal off-screen overflow of a div that has a large width
body: <p>How do I hide the horizontal, off-screen overflow of a <code>&lt;div&gt;</code> that has a large width set on it? For example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="example"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.example {
    height: 100px;
    width: 10000px;
    background-color: black;
    position: absolute;
    overflow: hidden;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/uh8d2avo/5/" rel="nofollow noreferrer">Here is an example fiddle</a> that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.</p>
  
  <p><strong>Edit</strong>: Adding hidden overflow-x on the parent element does not work on small width iOS devices.</p>