IE11中的Flex项目重叠项目

Question

我有两个 div：

1. 顶部 div 包含占据多行的长文本
2. 较低的 div 有 min-height 和 flex-grow: 1

当我将窗口缩小到滚动出现时，Chrome 中的所有内容都会正确显示。但是在 IE11 中 top 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

接受的答案中提到的flex-shrink: 0; 的使用可以防止重叠。但是，我使用 flex: 0 1 15% 之类的，因为我打算允许缩小，这在 MS Edge、Chrome 和 Firefox 等其他浏览器中可以很好地呈现，但在 IE 11 中则不行。

要仅对 IE 11 应用不收缩 (flex-shrink: 0)，我使用了以下代码，因为 -ms- 是特定于供应商的：

-ms-flex-negative: 0 !important;

Answer 2

IE11 充满了 flex 错误以及与其他浏览器的不一致。

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

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

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

将此添加到您的代码中：

.longtext {
    flex-shrink: 0;
}

revised fiddle

---

您可能还想研究：

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

• 将容器设置为width: 100%，因为 IE11 可能不会自动对块级弹性容器执行此操作。 Text in a flex container doesn't wrap in IE11

Answer 3

问题解决了：

  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);*/
}

编辑（IE11 上的屏幕截图）