制作图片库只填充 l 和 right 而不是 up 和 down

Question

我有关注图片库，我正在尝试使用 CSS 将其变成滑块。

如您所见，它在其外部容器中上下填充图像。我想强制它达到一定的高度，然后滚动。我想通过制作容器display:flexbox; overflow-x:scroll; height:100px; width:500px 来解决这个问题。但是，如果我这样做，它会是这样的：

问题是，无论我做什么，它都不会滚动或溢出。它将调整图片的高度和宽度以适合容器内。缺少什么？

容器及其内容的代码：

    <ol class="flex-control-nav flex-control-thumbs">
<li><img src="filepath.jpg" class="flex-active" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
<li><img src="filepath.jpg" draggable="false"></li>
    </ol>

Answer 1

这是一个有效的 sn-p：

body {
  overflow: none;
}

.container {
  display: flex;
  width: 500px;
  height: 120px;
  overflow: auto;
}

.container li {
  list-style-type: none;
}

.container li img {
  width: 100px;
  margin-left: 40px;
}

<div class="container">
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</div>