Flex-wrap 不包裹 IE11 中的项目

Question

我使用一个flexbox包含两个div相等宽度的容器。左侧显示图像，右侧显示一些文本。该代码包装了 Google Chrome 的项目，但在 Internet Explorer 11 中，它将右侧部分移动到左侧顶部。我怎么能解决这个问题？我尝试flex: auto在两个孩子以及flex-grow: 1,flex-shrink: 1和flex-basis: 0/ 上使用flex-basis: auto。我也尝试添加px或添加%，0但它们都给出了相同的结果......

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

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

.d1 .text {
  flex: 1;
  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">
    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

你可以参考这个代码示例。图像首先是原始尺寸，左右部分宽度相同。它在 IE 11 中运行良好：

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

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

.d1 .text {
  flex: 1;
  padding: 2%;
}

/* adjustment */
img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

<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">
    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>

IE 中的结果：