title: CSS absolute positioning, box-shadow and overflow auto
body: <p>I have an absolute positioned wrapper div that is containing my menu elements. </p>
  
  <p>The wrapper element is positioned directly at the top and the bottom of the viewport, so its height is always 100% of the browser window. </p>
  
  <p>The menu elements inside the wrapper element have a box-shadow which is overflowing the wrapper at the right side. Usually this is not a problem and the shadow is still visible.</p>
  
  <p>However, I need to make the wrapper scrollable in case the menu elements inside are higher than the wrapper itself. But adding <code>overflow-y: auto</code> will cut the shadow of the menu at the right side (whether a scrollbar is visible or not).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="menu"&gt;
          &lt;div id="main"&gt;Main&lt;/div&gt;
          &lt;div id="sub"&gt;Sub&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper {
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:250px;
      background-color:#eee;
      overflow-y:auto;
  }
  
  #menu {
      position:relative;  
      box-shadow:1px 1px 2px rgba(0,0,0,1);
  }
  
  #main {
      height:200px;
      background-color:green;
      padding:5px;
  }
  
  #sub {
      height:100px;
      background-color:orange;
      padding:5px;
  }
  </code></pre>
  
  <p>Please check this fiddle:
  <a href="http://jsfiddle.net/Kc9Zk/" rel="nofollow">http://jsfiddle.net/Kc9Zk/</a></p>
  
  <p>How can I make the shadow visible if there is no scrollbar?</p>
  
  <p>Please note that I do not want to make the wrapper wider than the elements inside because the scrollbar would look somewhat misplaced if visible.</p>