Горизонтальная полоса прокрутки с элементами Flex Box

Question

У меня есть 6 изображений внутри контейнера с display: flex, поэтому ширина контейнера делится на 6 изображений.

Я хочу показать 2 изображения и часть 3-го, а остальные 3 находятся рядом с ними справа, но не показываются, пока пользователь не прокрутит вправо.

Я скрываю горизонтальную полосу прокрутки, но хочу сохранить функции прокрутки, но, как показано в этой скрипке , отображаются 6 изображений.

Как показать только 2 изображения и часть 3, а остальные 3 скрыты справа рядом с первыми 3?

Вот код:

.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>

Как скрыть горизонтальную полосу прокрутки в этом случае?

Answer 1

Ваш контейнерный элемент должен иметь максимальную ширину того размера, который вы хотите показать, и полосу прокрутки на оси x.Ваш контейнер изображений должен быть явно сделан шире, чем содержащий элемент:

.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

Начальная настройка гибкого контейнера: flex-shrink: 1. Это означает, что гибкие элементы могут сжиматься, чтобы предотвратить переполнение контейнера. Вы можете отключить эту функцию с помощью flex-shrink: 0.

Добавьте это к своему коду:

.images__gallery-item {
    flex-shrink: 0;
}