Ширина элемента с "белым пространством: nowrap" не настраивается на дочерний контент

Я пытаюсь создать горизонтальную прокрутку с фоновым изображением (черепицей), используя переполнение-x: прокрутка и белое пространство: nowrap. Панель охватывает произвольное количество элементов.

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>

демонстрацию скрипта

Я хочу, чтобы фонная плитка автоматически охватывала всю ширину панели, включая все ее элементы элемента. В настоящее время он заполняется только шириной кадра. Преступник, похоже, является свойством ширины панели - он не регулирует общую ширину содержимого панели.

Ofc, он работает, настраивая свойство ширины вручную, но мне нужно, чтобы он динамически настраивался.

Как получить фоновое изображение панели, чтобы заполнить полную ширину панели? Есть ли другой способ достичь такого же результата?

ОТВЕТЫ

Ответ 1

Добавьте эту строку в .pane

display: inline-block;

Ответ 2

Вы можете определить фоновое изображение в кадре, которое является вашей всей панелью.

http://jsfiddle.net/erenyener/9u29k/6/

 .frame {
     overflow-x: scroll;
     background-image: url(http://store.got3d.com/products/30-tile-floor-textures/thumbnails/free-tile-floor-texture.jpg);
     background-repeat: repeat;
}