Flex项目与IE11中的项目重叠

Question

我有两个div：

1. top div包含一个占用多行的长文本
2. lower 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/

Chrome：



IE11：

Answer 1

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

在这种情况下，问题的根源是flex-shrink。

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

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

将此添加到您的代码中：

.longtext {
    flex-shrink: 0;
}

revised fiddle

您可能还想查看：

• 在弹性项目上设置min-width: auto，因为IE11的默认最小大小与新浏览器不同。请参阅＆＃34;浏览器渲染说明＆＃34;我的回答中的部分：Why don't flex items shrink past content size?

• 将容器设置为width: 100%，因为IE11可能不会自动执行此操作来阻止级别的Flex容器。 Text in a flex container doesn't wrap in IE11

Answer 2

问题解决了：

  body, html {
    height: 100vh;
    padding:0;
    margin:0;
}
.flexcontainer{
  width:25%;
  display: flex;
height: 100%;
  flex-flow: column;
  border: 1px solid lime;
}
.allspace{
  flex-grow:1;
  background-color: yellow;
}
.longtext{
  background-color: red;
  //EDIT
  flex-grow: 0;
  min-height: 100px;
}
.textcontainer{
  border:1px solid magenta;
  /*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}

EDIT（IE11上的截图）