CODEWITHSUNDEEP
cssinternet-explorerflexbox
Ibe Vanmeenen
Ibe Vanmeenen

Reputation: 948

Flexbox: flex-shrink not working in IE11 and below

I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.

Thank god we have Flexbox for that! Now this demo works in Chrome, Safari, FF and IE Edge:

http://codepen.io/IbeVanmeenen/pen/PqgOJM

.el {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  margin: 4rem 0;
}

.el__wrp {
  display: block;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;

  justify-content: space-around;

  min-width: 0px;
}

But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...

Anyone have a clue how to fix this..?

Thanks in advance

Upvotes: 0

Views: 7660

Answers (2)

Lukáš Kmoch
Lukáš Kmoch

Reputation: 1359

The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex

Upvotes: 0

Ibe Vanmeenen
Ibe Vanmeenen

Reputation: 948

Ok, fixed this!

I updated the pen. I tested the original code, but replaced the images with text, and it worked! So the problem was the images.

Original code for the images was:

.el__wrp img {
  display: block;
  margin: 0;

  max-width: 100%;
  min-width: auto;
}

And I changed it to:

.el__wrp img {
  display: block;
  margin: 0;

  width: 100%;
}

It all works now!

Upvotes: 3

Related Questions