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

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

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)