一种方法是使您的
figure元素具有弹性容器，并将其对齐方式设置为
flex-direction: column。这样可以更好地控制整个元素的宽度。
.flex-container { padding: 0; margin: 0; list-style: none; display: flex; flex-flow: row wrap; justify-content: flex-start;}.flex-figure-item { padding: 5px; margin-top: 10px; line-height: 10px; font-weight: bold; font-size: 1em; display: flex; flex-direction: column; width: 150px; }figcaption { color: black;}<div > <figure > <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>Short, John</figcaption> </figure> <figure > <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>WrapMe, Longname should not go past right side of image</figcaption> </figure> <figure > <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>Short, Sally</figcaption> </figure></div>
