html - IE11 中的 Flex 元素与元素重叠

Question

我有两个 div:

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

当我将窗口缩小到出现滚动条时，Chrome 中的所有内容都会正确显示。但在 IE11 中，top div 被缩减为一行，其文本位于 bottom 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 错误和与其他浏览器的不一致。

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

在应用 flex-shrink: 1(默认设置)后，IE11 会奇怪地渲染 flex 元素，这会导致下方元素与其上方的兄弟元素重叠。其他主流浏览器不会出现此问题。

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

将此添加到您的代码中:

.longtext {
    flex-shrink: 0;
}

revised fiddle

---

您可能还想查看:

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

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