IE11中的Flex项目重叠项目

Posted 2023-03-05

【中文标题】IE11中的Flex项目重叠项目

【英文标题】：Flex items overlapping item in IE11

【发布时间】：2018-08-28 03:58:38

【问题描述】：

我有两个 div：

顶部 div 包含占据多行的长文本 较低的 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：

【问题讨论】：

你试过用'height'代替'min-height'吗？ IE11 在子元素上同时使用 display: flex 和 min-height 时出现问题。

在ie11中，子div的固定高度也没有指定子div的高度也产生了问题

遇到了类似的问题。但是我的孩子 flex 项目也有嵌套元素，它们也是 flex。修复只是在内部子元素上设置一个高度。如果你忘记了高度，事情就会变得一团糟:)

【参考方案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;

【参考方案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

【讨论】：

先生，您拯救了我的夜晚！

【参考方案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 上的屏幕截图）

【讨论】：

不，它只在没有最小宽度的情况下工作，如果你把窗口缩小到顶部 div 的大小，那么问​​题是一样的：image.ibb.co/nJV2Xx/ie11.png

所以尝试将其修改为我之前的代码：.longtext min-height:100px;弹性增长：0；背景颜色：红色；

你可以发布 jsfiddle，因为在我看来，这个解决方案是上部 div 的固定最小高度，我需要根据其内容自动高度的顶部 div，底部具有固定最小高度的 div