Slider-Element nimmt nicht mehr als 100% Breite des Containers

Question

Ich habe einen Container und Inhalte, die ich horizontal scrollen möchte. Es wird dynamisch generiert, sodass ich nicht genau wissen kann, wie groß der Inhalt sein wird.

Das Problem ist also, dass das Styling (Hintergrund, Rahmen, etc.), das ich auf den Inhalt anwende, nur den anfänglich sichtbaren Bereich beeinflusst. Wenn Sie nach rechts blättern, fehlt bei der Anzeige zusätzlicher Inhalte das Styling. Dies liegt daran, dass die Elemente, auf die sie angewendet werden, zu 100% die Breite des Containers haben, der Inhalt jedoch die Grenzen überschreitet.

Dies ist ein Beispiel dafür, was ich meine: fiddle

.wrapper { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px black solid; 
 
    overflow-x: scroll; 
 
} 
 

 
.slider { 
 
    position: relative; 
 
    height: 100%; 
 
    background: white; 
 
} 
 

 
.line { 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.line-item { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 30px; 
 
}

<div class="wrapper"> 
 
    <div class="slider"> 
 
    <div class="line"> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
    </div> 
 
    </div> 
 
</div>

In diesem Beispiel werden die Inhalte von .line.line Vergangenheit verlängern, so natürlich die Grenze und Hintergrund nicht angewendet werden . Wie kann ich den Rahmen und den Hintergrund auf den gesamten Inhalt von .line erweitern?

Mit anderen Worten, wie kann ich .line bekommen, um mehr als 100% Breite zu nehmen?

Answer 1

Sprechen Sie die slider Anzeige als Inline-Block

.wrapper { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    border: 1px black solid; 
 
    overflow-x:scroll; 
 
} 
 
.slider { 
 
    display: inline-block;  /* added */ 
 
    position:relative; 
 
    height:100%; 
 
    background:white; 
 
} 
 
.line { 
 
    height:20px; 
 
    white-space:nowrap; 
 
    border-bottom:1px solid black; 
 
} 
 
.line-item { 
 
    position:relative; 
 
    display:inline-block; 
 
    width:30px; 
 
}

<div class="wrapper"> 
 
    <div class="slider"> 
 
    <div class="line"> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
    </div> 
 
    </div> 
 
</div>