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

i'm trying use flexbox place 2 images side side in content flow. in chrome/safari scales images properly, in firefox/ie aspect ratio not respected , images distorted. overall width of content flow depends on width of browser. images therefor needs readjust window gets narrower.

this how looks in chrome/safari (webkit):

aspect ratio respected http://pluto.justdied.com/w2box/data/chrome.png

while how looks in firefox/internet explorer:

image stretches http://pluto.justdied.com/w2box/data/exhibit.png

this 2 column view comes in 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 css 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 fiddle sizing, still end form of distortion in firefox/ie. ideas how can fix it? hope use flexbox avoid having brute force javascript.

both source images share same height , width.

all feedback , appreciated!

thank you!

i haven't looked specific situation much, came across question while trying solve similar problem images inside flex container skewed on firefox.

my solution add object-fit: contain images , fixed aspect ratio in ff.

better late never if helps!