CSS Horizontal Scroll with 2 items column - html

Question

I am trying to pass a horizontal scroll for a "2 columns" type container, for 1 column I can use flex easily with this :
.slider-wr{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.item{
flex: 0 0 auto;
}
However this does not work for what I intend to, you can check what I currently have in columns here :
http://jsfiddle.net/0wm2cnao/3/

Answer 1

You can use another additional div elements.
Something like this:
<div class="slider-wr">
<div class="package">
<div class="item">
</div>
<div class="item">
</div>
</div>
<div class="package">
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>

Answer 2

You could also try wrapping it in another div:
<div class="slider-wr-outer">
<div class="slider-wr">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
And then limiting the slider-wr width:
.slider-wr{
min-width: 550px;
}
And making the outer div scroll:
.slider-wr-outer{
width: 100%;
overflow-x: scroll;
}