Flex items overlapping item in IE11

Question

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:

Answer 1

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

Answer 2

The use of flex-shrink: 0; mentioned in the accepted answer works to prevent overlapping. However, I'm using like flex: 0 1 15% as I intend to allow shrinking and this renders nicely in other browsers like MS Edge, Chrome, and Firefox, but not in IE 11.

To apply no shrinking (flex-shrink: 0) only for IE 11, I used the following instead as the -ms- is vendor-specific:

-ms-flex-negative: 0 !important;

Answer 3

problem solved:

  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);*/
}

EDIT (screenshots on IE11)