title: Why images overflow inline-block?
body: <p>HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="card"&gt;
          &lt;span class="card-title"&gt;Album&lt;/span&gt;
          &lt;div class="card-content"&gt;
              &lt;img class="album-thumbnail" src="a.jpg"&gt;
              &lt;img class="album-thumbnail" src="b.jpg"&gt;
              &lt;img class="album-thumbnail" src="c.jpg"&gt;
              &lt;img class="album-thumbnail" src="d.jpg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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:
  <a href="https://i.stack.imgur.com/Xo5OT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xo5OT.png" alt="enter image description here"></a></p>