Width of element with 'white-space: nowrap' doesn't adjust to child content

Question

I am trying to create a horizontally scrolling pane with (tiling) background image, using overflow-x: scroll & white-space: nowrap. The pane spans an arbitrary number of elements.

CSS:

.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;
}

HTML:

<div class="frame">
   <div class="pane">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

fiddle demo

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.

Ofc, it works by adjusting the width property manually, but I need it to adjust dynamically.

How do I get the pane's background image to fill the pane's full width? Is there another way to achieve same result?

Answer 1

Add this line to .pane

display: inline-block;