title: div doesn't scroll horizontally on overflow
body: <p>I have the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .contents {
    position: absolute;
    float: right;
    bottom: 0;
    width: 100%;
    top: calc(100% - 37px);
    overflow-x: auto;
    overflow-y: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    &lt;div class='contents'&gt;
       The contents of the 'contents' div might vary its width, not its height
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If <code>contents</code> div overflows, the horizontal scroll doesn't show up. The vertical scroll is still there, hidden, but there, and that is exactly what this div scrolls, the vertical, not the horizontal. What am I missing here?</p>