Flex items overlapping item in 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