对齐图像（无列），以便新行从最高位置开始

Question

我想以下面的方式对齐多个图像/框：

...
<img  width="200"
  src="http://www.passmark.com/images/monitortestscreenshot5.gif" />

<img  width="250"
  src="http://www.passmark.com/images/monitortestscreenshot5.gif" />
...

小提琴：https://jsfiddle.net/1eaxc7kr/2/

我显示的小提琴的问题是，如果不需要，第二行中的新元素不应该有上边元素的边距。

例如，第二行的第一个图像（可能取决于屏幕宽度）应该位于第一行的第一个元素的正下方。

我尝试过使用flexbox，但是我找不到好办法。

这是我试过的：

img {
  vertical-align: top;
  display: inline-flex;
} 

.container {
  align-items: flex-start;
}