title: Width of element with 'white-space: nowrap' doesn't adjust to child content
body: <p>I am trying to create a horizontally scrolling pane with (tiling) background image, using <strong>overflow-x: scroll</strong> &amp; <strong>white-space: nowrap</strong>. The pane spans an arbitrary number of elements. </p>
  
  <p>CSS:</p>
  
  <pre><code>.frame {
     overflow-x: scroll;
  }
  
  .pane {
     background-image: url(free-tile-floor-texture.jpg);
     background-repeat: repeat;
     white-space: nowrap;
  }
  
  .item {
     display: inline-block;
     width: 150px;
     height: 50px;
     background-color: grey;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="frame"&gt;
     &lt;div class="pane"&gt;
        &lt;div class="item"&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/coprolit/9u29k/2/" rel="noreferrer">fiddle demo</a></p>
  
  <p>I want the background tile to automatically span the full width of the pane including all its item elements. Currently it only fills to the frame width. The culprit seems to be the pane width property - it doesn't adjust to the overall width of pane contents.</p>
  
  <p>Ofc, it works by adjusting the width property manually, but I need it to adjust dynamically.</p>
  
  <p>How do I get the pane's background image to fill the pane's full width? Is there another way to achieve same result?</p>