Horizontal scrollbar with flex box items - html

Question

I have 6 images inside a container with display: flex, so the width of the container is divided on the 6 images.
I want to show 2 images and part of the 3rd, while the 3 others are next to them at the right but not shown until the user scrolls to the right.
I hide the horizontal scrollbar, but I want to keep the scrolling functions, but as shown in this fiddle, the 6 images are displayed.
How to only show 2 images and part of the 3rd with the other 3 hidden at the right next to the first 3?
Here is the code:
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
#media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
#media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
#media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}
<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>
How to hide the horizontal scrollbar in this case?

Answer 1

An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}

Answer 2

Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
#media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
#media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
#media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}
<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>