Chrome 在添加到 flexbox 时缩小图形元素

Question

我正在设计一个网页，其中 <figure> 元素被动态添加到 flexbox。这些数字每个都包含一个图像，可以是任何大小和纵横比以及 <figcaption>。 flexbox 有 justify-contents: space-between，我的意图是它应该填充无限数量的水平排列、均匀分布的图形。以下代码在 Firefox 上完美运行（至少据我所知）：

<html>
<head>
    <style>
        div {
            display: flex;
            justify-content: space-between;
        }
        figure {
            background-color: teal;
        }
        img {
            max-width: 25vmax;
            max-height: 25vmax;
        }
    </style>
</head>
<body>
    <div>
        <figure>
            <img src="http://placekitten.com/g/800/600">
            <figcaption>
                Caption goes here
            </figcaption>
        </figure>
    </div>
</body>
</html>

有一个脚本可以动态添加新图形，如下所示：http://codepen.io/anon/pen/jEzyyo。

问题是为了给新的图形腾出空间，Chrome缩小了div中所有图形的宽度（虽然图形的内容没有改变，这是我想要的), 因此间距被取消并且图像最终重叠。我该如何解决这个问题？

Answer 1

而不是

 div {
        display: flex;
        justify-content: space-between;
    }

使用这个CSS:

div {
    display: inline-flex;
    justify-content: space-between;
}

Chrome 在添加到 flexbox 时缩小图形元素

Chrome shrinks figure elements as they are added to a flexbox

css

google-chrome

flexbox