title: Inserted DOM Content Not Displaying In Chrome Without Resize
body: <p>This one has me stumped. I have three columns using divs with table layouts, all with 100% height. When I dynamically insert content that contains wrapping divs with <code>position: relative</code> and then <code>position: absolute</code> into one of the columns, Chrome won't show the new content unless the browser window is resized. It appears as though the outer wrapper is set to 0 height until the resize. IE and Firefox work as expected (the content shows immediately).</p>
  
  <p>Update: I'll also add it appears related to the <code>overflow: hidden</code> style set on <code>scroll-wrapper</code> - if that is removed it works fine in Chrome too.</p>
  
  <p>Here's a running example on CodePen: <a href="http://codepen.io/anon/pen/raqJEz" rel="nofollow">http://codepen.io/anon/pen/raqJEz</a></p>
  
  <p>Full code embedded here as well (though it appears you need to use the "Full Page" option when running on StackOverflow to actually see the behavior - it replicates in CodePen at any size):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", ".col1-link", function () {
    $("#col2").html('&lt;div class="relative-wrapper"&gt; \
          &lt;div class="scroll-wrapper"&gt; \
            Col2 \
          &lt;/div&gt; \
        &lt;/div&gt;');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    overflow: hidden;
  }
  .table-div {
    display: table;
    width: 100%;
  }
  .table-row {
    display: table-row;
    width: 100%;
  }
  .table-cell {
    display: table-cell;
    float: none;
    padding: 0;
    vertical-align: top;
  }
  .full-height {
    height: 100%;
  }
  .relative-wrapper {
    position: relative;
    height: 100%;
  }
  .scroll-wrapper {
    overflow: hidden !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  #col1 {
    width: 15%;
  }
  
  #col2 {
    width: 25%;
    padding: 0;
  }
  
  #col3 {
    width: 60%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="table-div full-height"&gt;
    &lt;div class="table-row full-height"&gt;
      &lt;div id="col1" class="table-cell full-height"&gt;
        &lt;a class="col1-link" href="#"&gt;Click Here&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="col2" class="table-cell full-height"&gt;
      &lt;/div&gt;
      &lt;div id="col3" class="table-cell full-height"&gt;
        After click, "Col2" will only be visible after resizing the window on Chrome, but works fine in IE and Firefox
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas why this might be happening?</p>