Flex项目与IE11中的另一个项目重叠 [英] Flex item overlaps another item in IE11

问题描述

我有两个div：

1. top div包含一个占用多行的长文本


2. lower div有 min-height 和 flex-grow：1

ol>



当我将窗口缩小到滚动条时，然后在chrome中显示正确。但在IE11中，顶级div减少为一行，其文本位于底部div上。



我只能在顶部div的内容设置一些宽度的情况下才能修复它（它使用固定宽度或计算宽度，但不适用于百分比宽度）
如何在不设置宽度或宽度百分比（ width：100％）的情况下修复它？



  body，html {height：99％;填充：0; margin：0;}。flexcontainer {width：25％;显示：flex; flex-direction：列;身高：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只有在指定宽度时才能正常工作。例如：width：calc（25vw  -  2px）; * /}  

 < div class =flexcontainer> < div class =longtext>第1部分长名称第1部分长名称第1部分长名称< / div> < div class =allspace>所有空间< / div>< / div>  

jsfiddle ：





IE11：




解决方案

在这种情况下，问题的根源在于： flex-> 收缩。





IE11在应用 flex-shrink：1 （默认设置），这会导致较低的项目与其上面的兄弟重叠。这个问题在其他主流浏览器中不会发生。





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





将此代码添加到您的代码中：



  .longtext {
 flex-shrink：0; 
} 
  

修正小提琴




I have two divs:

1. top div contains a long text that takes up several lines
2. lower div has min-height and flex-grow: 1

When I reducing the window to the scroll appeared, then in chrome everything is displayed correctly. But in IE11 top div is reduced to one line, and its text is on top of the bottom div.

I can fix it only with set some width for content of top div (it work with fixed width, or calc width, but not work with percentage width) How can I fix it without setting width or with percentage width (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:

解决方案

IE11 is full of flex bugs and inconsistencies with other browsers.

In this case, the source of the problem is flex-shrink.

IE11 is rendering flex items oddly after applying flex-shrink: 1 (a default setting), which causes the lower item to overlap its sibling above. This problem doesn't occur in other major browsers.

The solution is to disable flex-shrink. It fixes the problem in IE11 without changing anything in other browsers.

Add this to your code:

.longtext {
    flex-shrink: 0;
}

revised fiddle

这篇关于Flex项目与IE11中的另一个项目重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！