为什么图像会内嵌块溢出？

Question

HTML：

<div id="content">
    <div class="card">
        <span class="card-title">Album</span>
        <div class="card-content">
            <img class="album-thumbnail" src="a.jpg">
            <img class="album-thumbnail" src="b.jpg">
            <img class="album-thumbnail" src="c.jpg">
            <img class="album-thumbnail" src="d.jpg">
        </div>
    </div>
</div>

CSS：

.card {
    background-color: white;
    margin: 0 2em 2em 0;
    display: inline-flex;
    flex-direction: column;
    padding: 1.5em;
    border: 1px solid black;
}

.card-content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    max-height: 300px;
}

.album-thumbnail {
    width: 150px;
    margin: 1px;
}

在浏览器中，我可以看到两列图像，但是卡片内容的宽度在第一列结束处结束。是什么原因造成的，我该如何解决？

Answer 1

由于此代码部分中的display具有重复项：

.card {
    background-color: white;
    margin: 0 2em 2em 0;
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    border: 1px solid black;

    display: inline-block;
}

删除此行display: inline-block;，它应该可以正常工作。这是applied solution

问题的副本jsfiddle

Answer 2

您已删除css上的第二个显示：display: inline-block;，使其覆盖了display: flex；

StackBlitz链接：https://stackblitz.com/edit/angular-56onxk