title: Flexbox image scale to height and keep aspect ratio
body: <p>I have a DIV which is scaled to available height using CSS flexbox. In this DIV is an image which I would like to scale along with the DIV in both dimensions. That means it should be scaled keeping its aspect ratio and the dimensions which is less than the respective DIV dimension should be centered. </p>
  
  <p>I can make the image follow the width of the DIV, but not the height. Therefore, portrait images escape from the DIV bounds. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/aer69rcr/" rel="noreferrer">jsFiddle</a> to demonstrate the problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0;
  }
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .box {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="box" style="background: pink;"&gt;
      &lt;img src="//dummyimage.com/300" /&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>