I'm trying to make multiple divs sit side-by-side in an "overflow: hidden" parent. Each child div must use 100% width of the parent component. This is to simulate "swiping" between each child div.
A jsfiddle to illustrate my issue: https://jsfiddle.net/f83qeoxc/3/
<div class="wrapper">
<div id="i1" class="item">
item 1
</div>
<div id="i2" class="item">
item 2
</div>
<div id="i3" class="item">
item 3
</div>
</div>
.wrapper{
width: 200px;
display: block;
border: 1px solid black;
overflow-x: hidden;
}
.item{
display: ineline-block;
float: left;
width: 100%;
border: 1px solid red;
box-sizing: border-box;
}
StackOverflow already has plenty of material about this sort of issue. However, I couldn't find a solution that covers the following specifics:
children may not have absolute positioning as the parent must resize based their content height.
as each child has 100% width, only one has to appear at time, others are hidden by the parent' overflow-x property
Thanks for suggestions to solve this!
Change css
.wrapper {
border: 1px solid black;
display: block;
overflow-x: scroll;
white-space: nowrap;
width: 200px;
}
.item {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
*display:inline; /* for IE7*/
*zoom:1;/* for IE7*/
width: 100%;
}