title: Scale image in flexbox to available width OR height
body: <p>I want an image on a webpage to grow/shrink to the available <strong>height or width</strong> of a flexbox and keep the original aspect ratio.</p>
  
  <p>I have used <code>max-height:100%; max-width:100%</code> on the image but that doesn't work.</p>
  
  <p>The page always fills the browser window without overflow. It has 3 rows:</p>
  
  <ol>
  <li>a title at the top with fixed height</li>
  <li>an article, with image and description side by side</li>
  <li>a footer at the bottom with fixed height</li>
  </ol>
  
  <p>The image should grow/shrink with the available height or width, depending on the aspect ratio of the image and surrounding box.</p>
  
  <p>This means most of the times empty space is present left or under the image.</p>
  
  <p>This is a example page:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;style type="text/css"&gt;
  *    {font-size:100%; font:inherit; padding:0; border:0; margin:0}
  body {background:#FFC; color:#333; font-family:sans-serif}
  
  body                {display:flex; flex-direction:column; height:100%}
  h1                  {text-align:right; margin-right:20em; background:#CAA}
  
  article             {flex:1; display:flex}
  article figure      {flex:1}
  article figure img  {display:block; max-width:100%; max-height:100%}
  
  #description        {width:20em; background:#ACA}
  footer              {background:#AAC}
  &lt;/style&gt;
  &lt;/head&gt;&lt;body&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
  
    &lt;article&gt;
      &lt;figure&gt; &lt;img src="https://placekitten.com/987/765" /&gt; &lt;/figure&gt;
      &lt;div id="description"&gt;
        &lt;p&gt;The description.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/article&gt;
  
    &lt;footer&gt; Footer &lt;/footer&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I made a <a href="https://jsfiddle.net/0nw61s4t/1/" rel="nofollow" title="JSFiddle">JSFiddle</a>, but it does not place the footer fixed at the bottom as it does when viewed in a separate browser window.</p>
  
  <p>It would be nice to use flexbox as it's promoted for it's easy layout. But if this cannot be done with it I'll use absolute positioning.</p>