Horizontal scrollbar with flex box items

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

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>

Answer 2

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;
}