title: How to make an image fill a flex item with flex-grow?
body: <p>I've read through all existing solutions in which images could fill the containing divs but I haven't found a solution for filling a div without a static dimension, such as divs that only have been laid out by <code>flex-grow</code>.</p>
  
  <p>Currently the image will destroy the <code>flex-grow</code> proportions I have set on the container. I want the <code>img</code> to just fill the div and not stretch the div out.</p>
  
  <p>As much as possible I don't want to inline style.</p>
  
  <p>Is there an existing polyfill or solution to 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>.container {
    display: flex;
    min-height: 300px;
    width: 500px;
    flex: 1;
  }
  
  .sub-container {
    flex: 1;
    display: flex;
    flex-direction: row;
  }
  
  .sub-container &gt; div {
    flex-grow: 1;
  }
  
  .first-container {
    background-color: blue;
  }
  
  .second-container {
    background-color: yellow;
  }
  
  .second-container&gt;img {
    max-height: 100%;
    max-width: 100%;
    object-fit: scale-down;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="sub-container"&gt;
      &lt;div class="first-container"&gt;
        A
      &lt;/div&gt;
      &lt;div class="second-container"&gt;
        &lt;img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/jojonarte/tu3nbw4q/" rel="nofollow noreferrer">http://jsfiddle.net/jojonarte/tu3nbw4q/</a></p>