CSS: Image scaling issue with flexbox in Firefox/Internet Explorer

I'm trying to use flexbox to place two images side by side in my content flow. In Chrome/Safari it scales the images properly, but in Firefox/IE the aspect ratio is not respected and the images are distorted. The overall width of the content flow depends on the width of the browser. The images therefor needs to readjust as the window gets narrower.

This is how it looks in Chrome/Safari (WebKit):

While this is how it looks in Firefox/Internet Explorer:

This 2 column view comes in a long line of images.

The HTML markup:

<div class="grid">
  <img src="../images/mille_bornes_02.jpg">
  <img src="../images/mille_bornes_08.jpg">
</div>

And the CSS is as follows:

.grid {
  z-index: 1;
  margin: 0px 0px 16.5px;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
  border: 0;
}
.grid img {
  position: relative;
  display: block;
  margin-left: 16.5px;
  height: 100%;
  width: 100%;
}
.grid > img:first-child {
  margin-left: 0px;
}

I've tried to fiddle with the sizing, but I still end up with some form of distortion in Firefox/IE. Any ideas about how I can fix it? My hope was to use flexbox to avoid having to brute force it with JavaScript.

Both the source images share the same height and width.

All feedback and help would be greatly appreciated!

Thank you!