Image in flexbox to fill available width or height

HTML

<body>
<h1>Title</h1>

<article>
  <figure>
    <img src="https://placekitten.com/987/765" />
  </figure>
  <div id="description">
    <p>The description.</p>
  </div>
</article>    

<footer>
  Footer
</footer>
</body>

CSS

*    {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}