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

问题描述

我有两个div:

1. top div包含一个长文本，该文本占几行
2. 下层div具有min-height和flex-grow: 1

当我缩小滚动窗口时，然后在chrome中一切都正确显示.但是在IE11中，最上层div缩小为一行，其文本位于最下层div上方.

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.

我只能通过为top div的内容设置一些宽度来修复它(它可以使用固定宽度或calc宽度，但不能使用百分比宽度) 如何在不设置宽度或不设置百分比宽度(width:100%)的情况下进行修复?

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/

jsfiddle: https://jsfiddle.net/tkuu28gs/14/

Chrome浏览器:

Chrome:

IE11:

推荐答案

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

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

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

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

IE11在应用flex-shrink: 1(默认设置)后奇怪地渲染了flex项，这导致下面的项与上面的同级项重叠.在其他主要浏览器中不会发生此问题.

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.

解决方案是禁用flex-shrink.它可以解决IE11中的问题，而无需在其他浏览器中进行任何更改.

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;
}

修订过的小提琴

您可能还需要调查:

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

• 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?

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

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中伸缩项目重叠的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！