title: How to make an image fill a flexbox item?
body: <p>I have the following HTML that uses a <code>flex container</code> to house two divs, one containing an image (on the left) and the other one has some text:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="wrapper" style="display:flex; background:pink;"&gt;
  
      &lt;div id="image_div"&gt;
          &lt;img src="http://i.imgur.com/MvnfA1U.png"&gt;
      &lt;/div&gt;
  
      &lt;div id="number_list"&gt;
          &lt;h3&gt;One&lt;/h3&gt;
          &lt;h3&gt;Two&lt;/h3&gt;
          &lt;h3&gt;Three&lt;/h3&gt;
          &lt;h3&gt;Four&lt;/h3&gt;
          &lt;h3&gt;Five&lt;/h3&gt;
          &lt;h3&gt;Six&lt;/h3&gt;
          &lt;h3&gt;Seven&lt;/h3&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Which results in the following:</p>
  
  <p><a href="https://i.stack.imgur.com/DWwsE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DWwsE.jpg" alt="enter image description here"></a></p>
  
  <p>How do I get the image to increase in size and take the full height of its (pink) container, while:</p>
  
  <ol>
  <li>Keeping the image adjacent to the text (only pushing as far right as it needs to go)</li>
  <li>Maintaining the image's aspect ratio</li>
  <li>Without cutting off part of the image</li>
  <li>Without having text overlap the image</li>
  <li>Keeping it generic (eg no specifying pixel lengths)</li>
  </ol>
  
  <p>Thanks</p>