Flex项目与IE11中的另一项重叠

Question

我有两个div:

1. top div包含一个占用多行的长文本
2. 较低的div有min-height和flex-grow: 1

当我减少窗口出现滚动时,然后在chrome中一切都正确显示.但在IE11中,顶部div减少到一行,其文本位于底部div的顶部.

我可以修复它只为顶部div的内容设置一些宽度(它适用于固定宽度,或钙宽度,但无法使用百分比宽度)如何在不设置宽度或宽度百分比(width:100%)的情况下修复它？

body,
html {
  height: 99%;
  padding: 0;
  margin: 0;
}

.flexcontainer {
  width: 25%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid lime;
}

.allspace {
  flex-grow: 1;
  min-height: 300px;
  background-color: yellow;
}

.longtext {
  background-color: red;
}

.textcontainer {
  border: 1px solid magenta;
  /*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}

<div class="flexcontainer">
  <div class="longtext">
    section 1 with long name section 1 with long name section 1 with long name
  </div>
  <div class="allspace">
    all space
  </div>
</div>

jsfiddle:https://jsfiddle.net/tkuu28gs/14/

铬:

IE11:

Answer 1

IE11充满了灵活性错误,与其他浏览器不一致.

在这种情况下,问题的根源是flex-shrink.

IE11在应用flex-shrink: 1(默认设置)后奇怪地呈现弹性项目,这导致下面的项目与其上面的兄弟重叠.其他主流浏览器不会出现此问题.

解决方案是禁用flex-shrink.它解决了IE11中的问题而无需在其他浏览器中更改任何内容.

将其添加到您的代码中:

.longtext {
    flex-shrink: 0;
}

修改过的小提琴