Chrome shrinks figure elements as they are added to a flexbox

问题

I am designing a webpage in which <figure> elements are dynamically added to a flexbox. These figures each contain an image which can be of any size and aspect ratio as well as a <figcaption>. The flexbox has justify-contents: space-between, and it is my intention that it should be populated with an indefinite number of horizontally arranged, evenly-spaced figures. The following code works perfectly on Firefox (at least as far as I can tell):

<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>

There is a script to dynamically add new figures, as demonstrated here: http://codepen.io/anon/pen/jEzyyo.

The issue is that to make room for new figures, Chrome shrinks the width of all the figures in the div (though the content of the figures is unchanged, which is what I want), and so the spacing is thrown off and images end up overlapping. How can I get around this?

回答1:

Instead of

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

Use this CSS:

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

来源：https://stackoverflow.com/questions/28585053/chrome-shrinks-figure-elements-as-they-are-added-to-a-flexbox

标签

css

css3

google-chrome

flexbox