css - Expand width of absolutely positioned element to contain horizontally placed children irrespective of parent's width -

css - Expand width of absolutely positioned element to contain horizontally placed children irrespective of parent's width -

i'm creating image slider. have parent <div> mask wider child:

<div class="viewport"> <div class="strip"> <div class="item"> <img src="1.png"> </div> <div class="item"> <img src="2.png" > </div> <div class="item"> <img src="3.png"> </div> </div> </div>

my parent has fixed width, , show scrollbars when content overflows:

.viewport{ width:400px; height: 100px; overflow:scroll; margin-top:100px; }

its child, .strip, should expand contain of children horizontal row. in past, ensure .strip contain children without clearing, either:

sum widths of pre-determined number of children , hardcode it sum of widths of unknown number of children via javascript

since i'm targeting modern browsers, thought maybe problem solved using flexbox:

.strip{ display: flex; height:100px; } .item{ width:150px; flex-basis:150px; margin-right:10px; }

it gets tantalizingly close, items stacked on top of 1 another:

http://jsfiddle.net/rytpp/14/

is there someway space them out, or there no way around .viewport's width constraint?

how using display:inline-block; .item , white-space:nowrap; .strip?

.strip{ height:100px; white-space:nowrap; font-size:0; } .item{ width:150px; display:inline-block; margin-right:10px; }

as per fiddle...

that way you're not restricted flexbox-supporting browsers.

css css3 flexbox