IE11 中的 Flex 项目重叠项目 [英] Flex items overlapping item in IE11

问题描述

我有两个 div:

1. 顶部 div 包含一个长文本，占用多行
2. lower div 有 min-height 和 flex-grow: 1

当我将窗口缩小到出现的滚动条时，在 chrome 中一切都显示正确.但是在 IE11 中 top div 被缩减为一行，并且它的文本在底部 div 的顶部.

我只能通过为顶部 div 的内容设置一些宽度来修复它(它适用于固定宽度或计算宽度，但不适用于百分比宽度)如何在不设置宽度或百分比宽度 (width:100%) 的情况下修复它?

body,html {高度:99%；填充:0；边距:0；}.flexcontainer {宽度:25%；显示:弹性；弹性方向:列；高度:100%；边框:1px 实心石灰；}.allspace {弹性增长:1；最小高度:300px；背景颜色:黄色；}.longtext {背景颜色:红色；}.textcontainer {边框:1px 纯品红色；/*IE 只有在指定宽度时才能正常工作.举例:width:calc(25vw - 2px);*/}

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

jsfiddle:

IE11:

解决方案

IE11 充满了 flex 错误和与其他浏览器的不一致.

在这种情况下，问题的根源在于flex-shrink.

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

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

将此添加到您的代码中:

.longtext {弹性收缩:0；}

修正小提琴

<小时>

您可能还想查看:

• 在弹性项目上设置 min-width: auto，因为 IE11 的最小尺寸默认值与较新的浏览器不同.请参阅我的回答中的浏览器渲染说明"部分:为什么 flex 项目不缩小到内容大小?p>

• 将容器设置为 width: 100%，因为 IE11 可能不会自动对块级 flex 容器执行此操作.Flex 容器中的文本不会在 IE11 中换行

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

---

You may also want to look into:

• setting min-width: auto on flex items, as IE11 has a different minimum size default than newer browsers. See the "Browser Rendering Notes" section in my answer here: Why don't flex items shrink past content size?

• setting the container to width: 100%, as IE11 may not do this automatically to block-level flex containers. Text in a flex container doesn't wrap in IE11

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