title: Position fixed and overflow-y:scroll issue
body: <p>I have read this question &amp; answer: <a href="https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue">CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue</a> as well as a bunch of other conflicting use cases. I've tried applying different overflow types to different parents also. Nothing seems to get my use case working. </p>
  
  <p><strong>My Case</strong></p>
  
  <p>I have a full height fixed menu that will contain lots of links so if a browser isn't high enough to show them all I'd like to allow the user to scroll within the fixed div. <em>Not a bold request.</em></p>
  
  <p>How do I work around this issue, here's an example of the setup i'm using: <a href="http://jsfiddle.net/mz9abf43/9/" rel="nofollow noreferrer">http://jsfiddle.net/mz9abf43/9/</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is the updated fiddle with my full code for context, this is exactly how I want my menu to look but I just want to allow vertical scrolling if the screen height is smaller than the length of the menu. <a href="http://jsfiddle.net/mz9abf43/24/" rel="nofollow noreferrer">http://jsfiddle.net/mz9abf43/24/</a></p>
  
  <p><strong>Expected Output</strong></p>
  
  <p>The lines between each link should overflow to the right of the blue menu (like the image below) <strong>AND</strong> also allow the user to scroll within the blue menu. Currently I can only do one or the other.</p>
  
  <p><a href="https://i.stack.imgur.com/BbYJl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BbYJl.png" alt="enter image description here"></a></p>
  
  <p><strong>My structure is:</strong></p>
  
  <pre><code>&lt;div id="fixed"&gt;
      &lt;nav&gt;
         &lt;ul class="menu"&gt;
           &lt;div class="drop"&gt;
               &lt;li&gt;Link here&lt;/li&gt;
               &lt;li&gt;Link here
                   &lt;ul&gt;
                      &lt;div class="drop"&gt;
                          &lt;li&gt;Link here&lt;/li&gt;
                          &lt;li&gt;Link here&lt;/li&gt;
                      &lt;/div&gt;
                   &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;Link here&lt;/li&gt;
           &lt;/div&gt;
         &lt;/ul&gt;
      &lt;nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS is</strong></p>
  
  <pre><code>#fixed {
          width:280px;
          position: fixed;
          top: 0;
          left: 0;
          bottom:0;
          z-index: 1000;
          background: #fff;
  }
  
  .menu   {
          padding: 0;
          margin: 0;
          position: fixed;
          z-index: 9998;
          top:0;
          bottom:0;
          left:0;
          background: white;
          width: 280px;
  
          /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
          overflow-y: scroll;
          overflow-x: visible;
  
  }
  
  .menu .drop {
              background: #fff;
              height: 100%;
              z-index: 0;
  }
  </code></pre>