我希望图像被放置在彼此之后，即使它已经大于容器宽度，例如：
<div style = " border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;" >
<img style = " display: block; float:left; width: 400px; height: 100px;" src="images.jpg">
<img style = " display: block ; float:left;width: 400px; height: 100px;" src="images.jpg">
</div>
我如何使图像一个一个地走，即使第一个已经在容器的宽度之外？
显示:flex
null
div {
display: flex;
}
img {
display: block;
float: left;
width: 400px;
height: 100px;
}<body>
<br>
<div style=" border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>
</body>