IE11 flexbox preventing text wrapping? [closed]

Question

I am developing a site which displays OK in the latest versions of Firefox/SeaMonkey/Chrome, but interestingly in IE11 there is a rendering problem:
http://devel.gooeysoftware.com/mozaddons/switching.php

If you load this in IE11, the "Switching from Firefox to SeaMonkey" menu item along the left does not get its text wrapped to the size of the containing DIV, but instead overflows. I can't see why this is. Is it just a bug in IE11 or am I missing some CSS to get it to wrap?

UPDATE:

Looks like they fixed a bunch of the IE11 flexbox rendering bugs in Edge.

IE11:

Edge:

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

I came across a similar problem and found with IE11 you need to use the syntax:

flex: 1 1 auto;

rather than:

flex: 1;

Thanks to this Github commit: https://github.com/philipwalton/solved-by-flexbox/pull/8/files

Answer 3

I was able to get the text to properly wrap in IE10 & 11 by explicitly setting a width or max-width on the display: flex element and the child that needs to have its text wrapped.

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

Here's a Codepen demo.

Answer 4

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 5

Does this pen help? Here's what i found gives my a workaround for ie11.

http://codepen.io/dukebranding/pen/vLQxGy

p {
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;
}

Answer 6

I solved this issue by adding overflow: hidden to the flex item.

But this also prevents all child elements to overflow, so it maybe a bad solution if you are using tooltips or popovers inside your flex item.

Answer 7

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 8

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.

Answer 9

Just remove

align-items: flex-start

for #ContentNav. There is no reason to use it for columned flexbox.

Answer 10

A bit late to the party, but setting white-space: normal did the trick for me.