CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
user3541631
user3541631

Reputation: 4008

Constrain and image max-width to parent container and re-scal height doesn't work in IE11

I have the code below.

I want to force an image max-width to be constrained/rescale to the container width , and height is free. It works in Chrome/Firefox but not in IE11

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}
<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>

IE screenshot:

enter image description here

Upvotes: 1

Views: 41

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Add flex: 1 or min-width: 1px to flex item - the a element, to fix this in IE11 as well. See demo below: 

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}

.cimage a { /* ADDED */
  flex: 1;
}
<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>

Upvotes: 1

Related Questions