Adding a vertically scrollable item inside a horizontal carousel
A flexbox solution
- Each item is 33.33% wide and 100px high. The items inside
.multiple
are also 100px high. .multiple
hasposition: relative
andoverflow-y: auto
. The items inside haveposition: absolute
.- Hint: Container ->
position: relative
, items inside ->position: absolute
. That's how it works. top: (100 * n)px
for each<div>
inside.item.multiple
.n
is the index of the<div>
inside.item.multiple
, starting with 0.
The HTML structure has been changed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>