title: Nested flexbox does not shrink
body: <p>I am trying to get a variable number of square images to fill up a parent container. I need the images to grow or shrink in size <em>responsive</em> to ensure that they all fit, but never expand beyond the size of the the parent container horizontally <em>and</em> vertically. Image ratio also needs to be preserved without cropping. </p>
  
  <p>I am trying to use nested flex-boxes to accomplish this. The <code>.outer-flex-container</code> is working as expected with everything shrinking/growing along the horizontal axis while maintaining the aspect ratio. </p>
  
  <p>With the <code>.inner-flex-container</code> I am trying to get the same results, but along the vertical axis (<code>flex-flow: column</code>). However when you shrink the container size, you get images that do not shrink (or distort the aspect ratio). </p>
  
  <p>I have read through numerous posts about using <code>min-height: 0</code> to override the default <code>min-height: auto</code> however this does not seem to solve my problem. </p>
  
  <p>Why does the <code>.inner-flex-container</code> not shrink to the size of the container? Is there a better approach than flexbox to accomplish 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>.outer-flex-container {
    display: flex;
    flex-flow: row nowrap;
    border: 1px solid red;
    width: 900px;
    height: 500px;
  }
  
  .outer-flex-container:hover {
    width: 500px;
    height: 100px;
  }
  
  .outer-flex-child {
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
  }
  
  .inner-flex-container {
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid grey;
    min-height: 0;
    min-width: 0;
    /* max-height: 100%;  &lt;-- Distorts aspect ratio */
    /* max-width: 100%; &lt;-- Distorts aspect ratio */
  }
  
  .inner-flex-child {
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    max-width: 100%;
    opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-flex-container"&gt;
    &lt;div class="outer-flex-child"&gt;
      &lt;div class="inner-flex-container"&gt;
        &lt;img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="outer-flex-child"&gt;
      &lt;div class="inner-flex-container"&gt;
        &lt;img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>