title: overflow-x screws background-color of a div
body: <p>When using overflow-x in a parent div, the background-color of this parent-div will be used only that area which is initially visible, for the hidden/scroll-available part it will not.</p>
  
  <p><a href="http://jsfiddle.net/23yEz/5/" rel="nofollow">http://jsfiddle.net/23yEz/5/</a></p>
  
  <p>I expect the 'row' classed divs to have proper background (green, blue) everywhere.</p>
  
  <pre><code>    .row:nth-child(odd)
  {
      background-color: green;    
  }
  
  .row:nth-child(even)
  {
      background-color: blue;    
  }
  
  .col
  {
      display: table-cell;
      width: 200px;
      min-width: 200px;
  }
  
  .col2
  {
      display: table-cell;
      width: 400px;
      min-width: 400px;
  }
  
      &lt;div style="overflow-x: auto; background-color: red; margin-top: 50px"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col"&gt;text 1&lt;/div&gt;
          &lt;div class="col"&gt;text 2&lt;/div&gt;
          &lt;div class="col"&gt;text 3&lt;/div&gt;
          &lt;div class="col"&gt;text 4&lt;/div&gt;
          &lt;div class="col"&gt;text 5&lt;/div&gt;
          &lt;div class="col"&gt;text 6&lt;/div&gt;
          &lt;div class="col"&gt;text 7&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col2"&gt;Row2 Cell 1&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 2&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 3&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 4&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 5&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 6&lt;/div&gt;
          &lt;div class="col2"&gt;Row2 Cell 7&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col2"&gt;Row3 Cell 1&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 2&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 3&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 4&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 5&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 6&lt;/div&gt;
          &lt;div class="col2"&gt;Row3 Cell 7&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col2"&gt;Row4 Cell 1&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 2&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 3&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 4&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 5&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 6&lt;/div&gt;
          &lt;div class="col2"&gt;Row4 Cell 7&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>