带有弹性框项目的水平滚动条

Question

在带有display: flex的容器中我有6张图像，因此容器的宽度被划分为6张图像。

我想显示2幅图像和3幅图像的一部分，而其他3幅图像则在其右侧，但是直到用户向右滚动时才显示。

我隐藏了水平滚动条，但是我想保留滚动功能，但是如this fiddle所示，显示了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

弹性容器的初始设置为flex-shrink: 1。这意味着弹性物品可以收缩，以防止容器溢出。您可以使用flex-shrink: 0禁用此功能。

将此添加到您的代码中：

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

Answer 2

您的容器元素必须具有您要显示的大小的最大宽度，并在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>