Auto-resize image in flex item
<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>