title: Stretchable form doesn't work in IE with absolute inside relative positioning and overflow
body: <p>I'm working on an email-picker form that needs to be able to stretch to the size of the container, and also accomodate the "to" selector increasing in size as more addresses are selected.  I have a solution that works great in Firefox and Chrome, but fails in IE9 &amp; IE10.</p>
  
  <p>Here is an illustration of what I'm trying to do:
  <img src="https://i.stack.imgur.com/2sw6w.png" alt="enter image description here"></p>
  
  <p>The core of the issue is that a DIV must be "position:absolute" for "overflow-y:auto" to work, and to position that within the flow, it needs a parent that is "position:relative".  I'm using tables in order to get the sizing to stretch properly in both directions, but bonus points to anyone who can make this stretch properly without the use of tables.</p>
  
  <p>I have boiled down the problem to a minimal example here:
  <a href="http://jsfiddle.net/yh7YD/4/" rel="nofollow noreferrer">http://jsfiddle.net/yh7YD/4/</a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;table border="1"&gt;
          &lt;tr class="first-row"&gt;
              &lt;td class="to-label"&gt;To:&lt;/td&gt;
              &lt;td class="input-wrapper"&gt;
                  &lt;textarea&gt;&lt;/textarea&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="results-row"&gt;
              &lt;td colspan="2" class="results-wrapper"&gt;
                  &lt;div class="results"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;one&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code>.outer {
      position: absolute;
      top: 50px;
      left: 50px;
      right: 50px;
      bottom:50px;
  }
  .first-row {
      height:10px;
  }
  .results-wrapper {
      position:relative;
  }
  table {
      width: 100%;
      height:100%;
  }
  .results {
      position:absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      overflow-y: scroll;
  }
  </code></pre>