弹性框与图像连续

Question

I am using a bootstrap panel to display three images in a row. Suppose if I have six images in total, I want to display three in a row and the next three should come one by one as I move the scrollbar.

For applying the scrollbar, I did overflow-x:visible , but nothing is coming on the screen.

Also, the fourth image is coming below the three images in a row.

What should I do to make the images horizontally scrollable with three images getting displayed on the screen at a time?

The codepen link to my code is: Link

Answer 1

Is this what you are looking for?

 .container { display: flex; max-width: 225px; overflow-x: scroll; } 

 <div class="container"> <img src="http://placehold.it/75x50/000000"> <img src="http://placehold.it/75x50/ff0000"> <img src="http://placehold.it/75x50/333333"> <img src="http://placehold.it/75x50/00ff00"> <img src="http://placehold.it/75x50/666666"> <img src="http://placehold.it/75x50/0000ff"> </div>