Why images overflow inline-block? - html

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;
}
In the browser I can see two columns of images, but the width of card-content ends where the first column ends. What causes this and how can I solve it?
This is how it looks currently:

Answer 1

Cause you have a duplicate for display in this code section:
.card {
background-color: white;
margin: 0 2em 2em 0;
display: flex;
flex-direction: column;
padding: 1.5em;
border: 1px solid black;
display: inline-block;
}
Remove this line display: inline-block; and it should work just fine. Here's a replica jsfiddle of the problem with the applied solution
Here's a screenshot with your element inspected:
Another thing you should remove if you don't want space around the columns is align-items: center; inside the class .card-content.
Open the updated fiddle to see the changes.