title: img inside d-flex div causes image to overflow in Bootstrap 4 in IE 11
body: <p>I have a page with bootstrap 4 grid system, it renders fine on all browsers except IE 11. I have this <a href="http://jsfiddle.net/aq9Laaew/36238/" rel="nofollow noreferrer">snippet</a> on jsfiddle that you can view in IE 11 to see that the image gets stretched inside a d-flex container. How can I fix this?</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row py-3 justify-content-center"&gt;
      &lt;div class="col-3 bg-primary"&gt;
        This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
      &lt;/div&gt;
      &lt;div class="col-5 d-flex align-items-center"&gt;
        &lt;img class="img-fluid" src="https://www.w3schools.com/w3css/img_lights.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="col-3 bg-primary"&gt;
        This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image This content is longer than image
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>