title: Scope/Depth of CSS overflow property
body: <p>Consider the following HTML:</p>
  
  <pre><code>&lt;div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper"&gt;
      &lt;div id = "selections-inner-wrapper" style = "position: relative"&gt;
          &lt;ul style = "text-align:left; width: 12em;"&gt;
               &lt;!---- LOTS OF LI ELEMENTS GO HERE ----&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My intention here is that anything within the outermost DIV should be hidden (clipped) if it extends beyond <code>5em</code> in height. (That is the purpose of the <code>overflow: hidden</code> style attribute.)  When I render this HTML using Firefox or any Webkit-based browser, the inner content is correctly clipped.</p>
  
  <p>jsfiddle link: <a href="http://jsfiddle.net/Q82N9/" rel="nofollow noreferrer">http://jsfiddle.net/Q82N9/</a></p>
  
  <p>Screenshot with Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/vggqA.png" alt="enter image description here"></p>
  
  <p><strong>However, with IE-7 it doesn't work correctly.</strong>  (surprise, surprise)  For some reason, the inner <code>UL</code> element is not clipped, despite the <code>overflow: hidden</code> property.</p>
  
  <p>Screenshot with IE-7:</p>
  
  <p><img src="https://i.stack.imgur.com/LjD83.png" alt="enter image description here"></p>
  
  <p>It seems the problem is the <code>position: relative</code> styling attribute in the inner-DIV.  If I remove that style attribute, it works fine on IE-7.  However, I need the inner-DIV to have a <code>relative</code> position, because certain Javascript code that I'm working with assumes it does in order to scroll it up and down.</p>
  
  <p><strong><em>Question:</em></strong> So, is there some reason this isn't working on IE-7?  Is this a well-known problem with a workaround?  Or is IE-7 actually doing the right thing and for some reason relatively positioned nodes can't be <code>hidden</code> using the <code>overflow</code> property.</p>