title: How to create a scrolling DIV without cropping overflow-x?
body: <p>I have a DIV that is only supposed to scroll vertically. I would like to have an element inside this DIV overflow horizontally without being cropped. This is the desired effect:</p>
  
  <p><img src="https://i.stack.imgur.com/mnZXI.jpg" alt="enter image description here"></p>
  
  <p>I thought that if I only specified <code>overflow-y:scroll</code>, it would only crop the vertical overflow. However, I was wrong and this is what really happens: </p>
  
  <p><img src="https://i.stack.imgur.com/M1Upj.png" alt="enter image description here"></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ol {
      border: 1px solid red;
      overflow-y: scroll;
      height: 20em;
      width: 7em;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong> </p>
  
  <p><a href="http://jsfiddle.net/u6d6W/1/" rel="noreferrer">http://jsfiddle.net/u6d6W/1/</a></p>