title: Make images and text the same size in a flexbox
body: <p>So basically I would like to display some pictures on the left and some content on the right, while using a flexbox to make them of the same height.</p>
  <p>The result should look something like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    width: 100%;
    background-color: black;
    color: white;
    overflow: auto;
    font-size: 1vmax;
    display: flex;
    align-items: center;
  }
  
  #div2 {
    padding: 1%;
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  #div3 {
    padding: 1%;
    text-align: center;
    white-space: nowrap;
    width: max-content;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt;
    &lt;div id="div2"&gt;
      &lt;!-- Some very big pictures --&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="50em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="50em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="50em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="50em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="50em" /&gt;
    &lt;/div&gt;
    &lt;div id="div3"&gt;&lt;span&gt;Line 1&lt;/span&gt;&lt;br /&gt;&lt;span&gt;Line 2&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, you can see that in this case the height of the pictures are manually set and isn't the same height as the two-line content on the right.</p>
  <p>I hope I can do something like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    width: 100%;
    background-color: black;
    color: white;
    overflow: auto;
    font-size: 1vmax;
    display: flex;
    align-items: center;
  }
  
  #div2 {
    padding: 1%;
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  #div3 {
    padding: 1%;
    text-align: center;
    white-space: nowrap;
    width: max-content;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt;
    &lt;div id="div2"&gt;
      &lt;!-- Some very big pictures --&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="1em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="1em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="1em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="1em" /&gt;
      &lt;img src="https://via.placeholder.com/1000/" height="1em" /&gt;
    &lt;/div&gt;
    &lt;div id="div3"&gt;&lt;span&gt;Line 1&lt;/span&gt;&lt;br /&gt;&lt;span&gt;Line 2&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But apparently setting the height of the images to <code>1em</code> made it extra-small.</p>
  <p>Any ideas how to achieve that?</p>