Breite des Elements mit 'Leerraum: Nowrap' passt sich nicht an den untergeordneten Inhalt an

Ich versuche, mit overflow-x ein horizontal scrollendes Fenster mit (nebeneinander angeordneten) Hintergrundbild zu erstellen: scroll & white-space: nowrap . Das Fenster umfasst eine beliebige Anzahl von Elementen.

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>

Geige Demo

Ich möchte, dass sich die Hintergrundkachel automatisch über die gesamte Breite des Fensters einschließlich aller Elemente des Elements erstreckt. Derzeit wird nur die Rahmenbreite ausgefüllt. Der Schuldige scheint die Eigenschaft für die Fensterbreite zu sein - sie passt sich nicht an die Gesamtbreite des Fensterinhalts an.

Natürlich funktioniert das, indem die width -Eigenschaft manuell angepasst wird, aber ich muss sie dynamisch anpassen.

Wie kann ich das Hintergrundbild des Fensters so einstellen, dass es die gesamte Breite des Fensters ausfüllt? Gibt es einen anderen Weg, um das gleiche Ergebnis zu erzielen?