title: WebKit Rendering Issue when using overflow: hidden;
body: <p>I've run into what seems to be a rendering issue in webkit when using <em>overflow: hidden;</em> on a child div and then increasing the height of a parent div using javascript.  I've boiled my issue down to the following sample code.</p>
  
  <p>Create a page from this source and then render in a WebKit browser (Safari, Chrome).  Click on the "Expand" button and you will see that the divs that have <em>overflow: hidden;</em> set and should now be displayed based on the expanded parent div height don't show up.  In Gecko (Firefox) and Trident (ID) browsers this works fine.  </p>
  
  <p>Any ideas or suggestions for work arounds?  Basically, I want to hand build a table of divs that contain text within a parent div and I don't want the text to wrap or extend beyond the div boundaries.  I need to be able to adjust the height of the parent div based on other things happening on the page.  </p>
  
  <p>Thanks!
  Bart</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta http-equiv="Content-Language" content="en-us" /&gt;
  
  &lt;style type="text/css"&gt;
  
      #test_container {
          width: 540px;
      }
  
      .column_allow_overflow {
          float: left;
          width: 100px;
          height: 16px;
          margin-left: 4px;
          padding: 3px;
      }
  
      .column_no_overflow {
          float: left;
          width: 100px;
          height: 16px;
          margin-left: 4px;
          padding: 3px;
          overflow: hidden;
      }
  
      .background {
          background-color: #444444;
          color: #e5e5e5;
      }
  
      .data_row {
          height: 22px;
          width: 100%;
          padding-bottom: 22px;
          background-color: #cccccc;
      }
  
      #expand_container {
          overflow:scroll;
          overflow-x: hidden;
          -ms-overflow-x: hidden;
          height: 100px;
          width: 100%;
          background-color: #cccccc;
      }
  
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="test_container"&gt;
  &lt;div class="data_row background"&gt;
      &lt;button type="button" id="expand_button" onclick="expand();"&gt;Expand&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="expand_container"&gt;
      &lt;div class="data_row background"&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="data_row background"&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="data_row background"&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="data_row background"&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="data_row background"&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
          &lt;div class="column_allow_overflow background"&gt;
              Overflow allowed
          &lt;/div&gt;
          &lt;div class="column_no_overflow background"&gt;
              Overflow NOT allowed
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;  
  
  &lt;script&gt;
  
  var expand = function (e) {
      var button = document.getElementById('expand_button');
      var expand_container = document.getElementById('expand_container');
  
      button.onclick = contract;
  
      expand_container.style.height = '160px';
      button.innerHTML = "Contract";
  };
  
  var contract = function (e) {
      var button = document.getElementById('expand_button');
      var expand_container = document.getElementById('expand_container');
  
      button.onclick = expand;
  
      expand_container.style.height = '100px';
  
      button.innerHTML = "Expand";
  };                  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>