title: div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content
body: <p>I have a div with absolute position</p>
  
  <p>inside some other divs. </p>
  
  <p><a href="http://jsfiddle.net/d8GYk/" rel="nofollow">http://jsfiddle.net/d8GYk/</a></p>
  
  <pre><code> &lt;div style="position: absolute; 
  display: block; 
  outline: 0px;
   margin: 0px; 
   padding: 0px; 
   top: 0; 
   text-align: left;
   font-size: 11px; 
   font-family: arial; 
   cursor: default; 
   border: 1px solid rgb(170, 170, 170); 
   overflow-x: hidden; white-space: pre; 
   overflow-y: auto; 
   left: 0px; 
   height: 132px;"&gt;&lt;div&gt;a                             a END&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;div&gt;ab&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As you can see the first div is not completely visible
  That's because the vertical scroll bar covers it.</p>
  
  <p>If I set overflow-y:scroll. The problem goes away.</p>
  
  <p>However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)</p>
  
  <p>Can somebody suggest how to resolve this problem ?</p>