Flex item shrinks too much in Internet Explorer 11

Question

I use a flexbox that consists of a left and right part, both of equal width. The first displays an image and the right some text. The code wraps well in Google Chrome but for Internet Explorer 11, it does not wrap the right part until its width gets very low.

Here's a video illustration of the problem: https://gyazo.com/b713844e85a2aafeb8054b5d2cdeabe1

How could I fix this? Thanks

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.d1 .text {
  background-color: lightblue;
  flex: 1;
  font-size: 40px;
  padding: 2%;
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 1

I think it would help to add a min-width to the .text element.

Try this:

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.d1 .text {
  background-color: lightblue;
  flex: 1;
  font-size: 40px;
  padding: 2%;
  min-width: 50%;  /* NEW */
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Thisisaverylongtext Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Also, as I think I've suggested to you before, avoid using the flex property in IE11. It's too buggy.

• flex property not working in IE