Html 使图像库只填充左侧和右侧，而不是上下

我已经跟随图像库，我正试图变成一个与CSS滑块

正如您所见，它在其外部容器中上下填充图像。我想强制它保持一定的高度，然后滚动。我想通过使容器

显示：flexbox；溢出-x：滚动；高度：100px；宽度：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>

以下是一个工作片段：

正文{
溢出：无；
}
.集装箱{
显示器：flex；
宽度：500px；
高度：120px；
溢出：自动；
}
李先生{
列表样式类型：无；
}
.李先生{
宽度：100px；
左边距：40px；
}

这里有一个完整的代码示例将非常有用。flex容器的宽度是多少？@peterbreen宽度未设置。很高兴获得更多代码。除了未设置的宽度之外，我还能提供什么？我很好奇渲染的是什么。看起来Wais在下面做了一个工作示例，虽然我不确定如何在默认情况下显示滚动条。谢谢，但我必须有

，那么我如何使它像上面那样工作？我设置了图像大小，它不会改变输出。当我更改图像的边距或宽度时，它只会缩小图像。即使您添加

，它也能正常工作。我已经更新了答案。