title: Auto-resize image in flex item
body: <p>I have the following html :</p>
  
  <pre><code>&lt;div class="main-container"&gt;
      &lt;h1&gt;A title&lt;/h1&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;div class="sub-container"&gt;
          &lt;img src=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS :</p>
  
  <pre><code>.main-container{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
  }
  .sub-container{
      flex-grow:2;
      background-color: green;
  }
  </code></pre>
  
  <p>Please note that I don't know the size of the container above "main-container". I'm using flex because I want the div in "main-container" to occupy all the remaining space at the bottom. </p>
  
  <p>What I want is to have an image in "sub-container" which fits its parent's size in both directions (height and width). Right now if I add an image into "sub-container" it overflows and doesn't get scaled at all. 
  I know that flex only works for immediate children (i.e. "sub-container" but not the image inside). I tried to use flex on "sub-container" too, but I couldn't achieve anything satisfactory. </p>