IE11 flexbox preventing text wrapping?

css flexbox internet-explorer-11
Jez picture Jez · Oct 2, 2013 · Viewed 20.3k times · Source

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?

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

IE11:
IE11 rendering

Edge:
Edge rendering

Answer

MsMaryMak picture MsMaryMak · Mar 21, 2015

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

Related questions

Flexbox Not Centering Vertically in IE

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't …

Read More
Text in a flex container doesn't wrap in IE11

Consider the following snippet: In Chrome, the text is wrapping as expected: But, in IE11, the text is not wrapping: Is this a known bug in IE? (if yes, a pointer will be appreciated) Is there a known workaround? This …

Read More
Why doesn't justify-content: center work in IE?

I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11: My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the …

Read More