IE11 flexbox preventing text wrapping? [closed]

Answer 1

Found this easy fix in the Flexbox bugs repository:

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}

Flexbox bug repository

Answer 2

As far as I can tell, IE's flexbox implementation is just broken. That's the long and short answer to this question. The text should be wrapping, but it isn't. It does in Firefox and Chrome.

UPDATE:

IE11's flexbox implementation was indeed broken. This now renders properly in Edge.

Answer 3

Thanks to pyko, add the following class to the parent of anything that is not behaving flex's usual overflow rules:

.ie-dont-overflow {
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;
}

I have no idea why this works. IE sucks...

Answer 4

I ran into a version of this bug, where text inside a flex item wasn't wrapping, and found that what fixed it in our particular case was simply to wrap the text inside the flex item in a <span> element, so that the text node is not a direct descendant of the flex item. This allowed the text to wrap in IE11 as it does in other browsers.

I suspect this works for similar reasons to isralCDuke's answer to this question, but seems a bit simpler, since it involves no extra CSS rules.