Flex-wrap 在 IE11 中不换行

Question

我使用一个 flexbox 容器，其中包含两个等宽的 div。左边显示图像，右边显示一些文本。该代码包装了 Google Chrome 的项目，但在 Internet Explorer 11 中，它将右侧部分移动到左侧顶部。我该如何解决这个问题？我尝试在 children 以及 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 / flex-basis: auto 上使用 flex: 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

将flex: auto添加到第一个child。

对于图像缩放，添加img { width: 100%; height: auto; }

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

.image-container {
  align-items: center;
  display: flex;
  flex: auto; /* adjustment */
  justify-content: center;
  max-width: 250px; /* optional; limits image size */
}


/* image scaling */
img {
  width: 100%;
  height: auto;
}

.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 2

您可以参考此代码示例。图像一开始是原始大小，左右部分宽度相同。它在 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 中的结果：

Flex-wrap 在 IE11 中不换行

Flex-wrap does not wrap items in IE11

css

flexbox

internet-explorer-11