title: Overflow-x: hidden also hides vertical content too
body: <p>I have a DIV measuring 400px wide, containing two DIVs side-by-side, each with width of 400px and height of 600px. The width of both DIVs is fixed, however the height can vary. I'd like to hide the second DIV and show the first completely, with no scrolling inside the DIV.</p>
  
  <p>My solution, I thought, was to hide the overflow-x. This seems to also hide the y overflow too.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#schools-sub-nav {
  }
  #schools-container {
    width: 400px; /* Set the width of the visible portion of content here */
    background-color: fuchsia;
    position: relative;
    overflow-x: hidden;
  }
  #schools-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    position: absolute;
    top: 0;
    left: 0;
  }
  #boards-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: green;
    position: absolute;
    top: 0;
    left: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="schools-sub-nav"&gt; &lt;a href="#schools-list"&gt;Schools List&lt;/a&gt; // &lt;a href="#boards-list"&gt;Boards List&lt;/a&gt; &lt;/div&gt;
  &lt;div id="schools-container"&gt;
      &lt;div id="schools-list"&gt; One &lt;/div&gt;
      &lt;div id="boards-list"&gt; Two &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect <code>#schools-list</code> to be visible, but for some reason <code>overflow-x: hidden</code> in <code>#schools-container</code> hides it.</p>