<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/kitten.jpg" alt="miaou" />
</div>
body {
  display: flex;
  margin: 2em;
  padding: 2em;
  border: 2px dotted gray;
}

/* 1 */
/* flex-items, according to spec changes, have now an intrinsic "auto" min-width/min-height */
/* div's width is computed upon image size... */
/* until he gets an explicit dimension */
/* only Firefox respect this spec for now */
div {
  border: 2px dotted orange;
  min-width: 0; min-height: 0; /* 1 */ 
}

/* 2 */ 
/* isn't enough anymore on Firefox when you scale window */ 
img {
  max-width: 100%; /* 2 */ 
  height: auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.