Filling in flexbox and retaining aspect ratio without JavaScript

Title says it all. I'm looking for a solution to make img tag fill parent (image and parent are of unknown size) while respecting aspect ratio, also without using background-size or any other workaround. I need the block with the image to have size of that picture (which background-size does not). I tried many things, like min-width and min-height, some strange things with zoom, many combinations of width/height: 100%/auto/0.

html, body{
  height: 100%;
  width: 100%;
}

#container {
  border: 2px solid darkblue;
  height: 95%;
  width: 97%;
}

#pic {
  width: 100%;
  height: 100%;
}

<div id="container">
  <img src="http://ift.tt/1GQWixM" id="pic">
</div>