IE11 flexbox preventing text wrapping?

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?

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

IE11:

Edge:

I don't think this is a dupe; I'm not even sure that that linked question is describing the same problem as here, and the accepted answer doesn't actually work in my IE11 anyway. — Jez, Oct 02 '13 at 14:07
good to know ie11 won't end the css nightmare we've had for the last decade. Hurry up and die ie, good question btw. — andygoestohollywood, Oct 17 '13 at 08:28
related: [Why IE11 doesn't wrap the text in flexbox?](http://stackoverflow.com/q/35111090/3597276) — Michael Benjamin, Feb 02 '16 at 04:31

score 24 · Answer 1 · answered Mar 21 '15 at 18:52

24

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

answered Mar 21 '15 at 18:52

MsMaryMak

332
2
13

Although the bug seems similar, I couldn't get that fix to work on my example site. – Jez Mar 21 '15 at 19:12
3

Could articulate more the way you used to fix the issue? – abarisone Mar 21 '15 at 19:16
**This** is the answer that worked for me. I have an image browser for websites with folder navigation above and the images below with a `float: right` upload form to the right. I didn't have to add any class and could just plop it in to the current selector. Granted this is extremely subjective to *what kind* of layout you're attempting; thank you for posting this! – John Sep 25 '15 at 20:15

Steve Farthing · Answer 2 · 2014-02-21T16:46:33.830

8

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

edited Feb 21 '14 at 16:46

answered Feb 14 '14 at 18:18

Steve Farthing

792
6
10

I'm not using `flex: 1;` anywhere; I'm using `flex: none;`. – Jez Feb 14 '14 at 19:08
flex-shrink and flex-basis are already 1 and auto by default so it won't change a thing. The flexbox in IE is just broken. It breaks as soon as there's too much content in the flex children, but not everytime. Random content based content, reminds me of IE6. – Capsule Sep 24 '15 at 02:05

Jez · Accepted Answer · 2016-10-26T14:01:40.673

7

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.

edited Oct 26 '16 at 14:01

answered Oct 17 '13 at 23:11

Jez

27,951
32
136
233

7

It is quite broken, though have found a work around that works for my case. Adding `-ms-overflow-x: hidden;` to the element that requires wrapping magically worked... – pyko Apr 19 '16 at 03:38
1

Didn't work for me either. – Dennis Johnsen Jun 07 '16 at 07:49
1

Ha, `-ms-overflow-x: hidden;` also did the trick for me. I placed it on the parent element (the one with `display: flex 1 0 auto`)! – Stephan Bijzitter Mar 08 '18 at 21:02

score 7 · Answer 4 · answered Aug 03 '15 at 18:47

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.

score 2 · Answer 5 · answered Feb 08 '16 at 21:37

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%;
}

score 1 · Answer 6 · answered Sep 12 '16 at 14:19

1

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.

answered Sep 12 '16 at 14:19

envic

11
1

score 0 · Answer 7 · answered Jun 20 '17 at 00:50

0

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...

answered Jun 20 '17 at 00:50

Garrett

231
1
3
4

1

Please read this [how-to-answer](http://stackoverflow.com/help/how-to-answer) and follow the guideline there to provide quality answer. – thewaywewere Jun 20 '17 at 01:11
@thewaywewere Is there something in particular wrong with my answer? I found a solution that worked for me, so wanted to share it with others. – Garrett Jul 19 '17 at 02:09

score 0 · Answer 8 · answered Nov 13 '18 at 11:34

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.

score -1 · Answer 9 · answered Aug 16 '15 at 13:00

-1

Just remove

align-items: flex-start

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

answered Aug 16 '15 at 13:00

Nikita Seleckis

74
1
7

score -2 · Answer 10 · answered Sep 09 '16 at 14:25

-2

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

answered Sep 09 '16 at 14:25

Bramus

1,732
14
19

Doesn't work for me, on IE11. – Jez Sep 09 '16 at 15:37

IE11 flexbox preventing text wrapping?

10 Answers10

Linked