Slider element won't take more than 100% width of container - html

Question

I have a container, and contents that I want to be horizontally scrollable. It's dynamically generated, so I can't know exactly how wide the contents will be.
So the problem is that the styling (background, border, etc) that I apply to the content only effects the area initially visible. When you scroll rightward, any additional content that comes into view is missing styling. This is because the elements they're applied to have 100% the width of the container, but the contents they contain extend past their limits.
This is an example of what I mean: 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 this example, the contents of .line extend past .line, so of course the border and background aren't applied. How can I get the border and background to extend to the entire contents of .line?
In other words, how can I get .line to take more than 100% width?

Answer 1

Make the slider display as an 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>