All Images inline with overflow - css

Question

First container fine, u can see 2 images and there are 6 images with overflow. (vertical)
Container2 problem, I want to make horizontal images list with overflow (Only x / horizontal).
My css so far:
#container {
display: block;
width: 80%;
height: 40vw;
background: red;
margin-bottom: 50px;
}
#imglist {
display: block;
overflow: auto;
height: 40vw;
width: 40%;
}
#imglist div {
display: block;
width: 100%;
}
#imglist div img {
width: 100%;
}
/*Problem*/
#container2 {
display: block;
width: 80%;
height: 20vw;
background: red;
}
#imglist2 {
overflow-x: scroll;
display: block;
width: 100%;
height: 15vw;
}
#imglist2 div {
width: 20%;
display: inline;
}
Example in JSFiddle: https://jsfiddle.net/n4a2tc7s/

Answer 1

Explicitly control wrapping and hiding
In addition to defining white-space: nowrap on the container, you should explicitly define overflow-y: hidden instead of overflow-x: scroll. Scroll bars will automatically appear on overflowed containers (unless you already have a rule preventing them), so you need only to restrict the scroll bars on the y axis for your scenario.
In the following example, I also set height: 100% on #imglist2 because the 15vw declaration was causing the scrollbar to crop the images. If that was intentional, feel free to roll it back in:
#container2 {
display: block;
width: 80%;
height: 20vw;
background: red;
white-space: nowrap;
}
#imglist2 {
overflow-y: hidden;
display: block;
width: 100%;
/*height: 15vw;*/
height: 100%;
}
#imglist2 div {
width: 20%;
display: inline;
}
<section id="container2">
<div id="imglist2">
<div>
<img src="http://img.youtube.com/vi/Je7VuV9yHIw/1.jpg">
</div>
<div>
<img src="http://img.youtube.com/vi/uxps_fYUeJk/1.jpg">
</div>
<div>
<img src="http://img.youtube.com/vi/Zvr3cwbbqHU/1.jpg">
</div>
<div>
<img src="http://img.youtube.com/vi/Ka9xtXPD3BA/1.jpg">
</div>
<div>
<img src="http://img.youtube.com/vi/U8HVQXkeU8U/1.jpg">
</div>
<div>
<img src="http://img.youtube.com/vi/e7_UUfokexM/1.jpg">
</div>
</div>
</section>

Answer 2

Try to add this :
#container2 {
display: block;
width: 80%;
height: 20vw;
background: red;
white-space: nowrap;
}