Internet Explorer 11 中的 Flex 项目缩小太多

Question

我使用的 flexbox 由左右两部分组成，宽度相等。第一个显示图像，右侧显示一些文本。代码在 Google Chrome 中包装得很好，但对于 Internet Explorer 11，它不会包装正确的部分，直到它的宽度变得非常低。

这是问题的视频说明： https://gyazo.com/b713844e85a2aafeb8054b5d2cdeabe1

我该如何解决这个问题？谢谢

.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

我认为将 min-width 添加到 .text 元素会有所帮助。

试试这个：

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

此外，正如我之前向您建议的那样，请避免在 IE11 中使用 flex 属性。太bug了。

flex property not working in IE

Internet Explorer 11 中的 Flex 项目缩小太多

Flex item shrinks too much in Internet Explorer 11

html

css

google-chrome

flexbox

internet-explorer-11