Text in a flex container doesn't wrap in IE11

Question

Consider the following snippet:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

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 similar question doesn't have a definite answer and an official pointer.

Possible duplicate of [IE11 flexbox preventing text wrapping?](http://stackoverflow.com/questions/19138107/ie11-flexbox-preventing-text-wrapping) — Simen S, Jan 31 '16 at 06:38
The issue goes away when I remove `align-items: center` from the parent element. That seems to be what's causing it — Nathan Perrier, May 10 '18 at 14:04

score 315 · Accepted Answer · edited May 23 '17 at 11:54

315

Add this to your code:

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE

edited May 23 '17 at 11:54

Community

1
1

answered Jan 31 '16 at 12:05

Michael Benjamin

346,931
104
581
701

19

I had to add width: 100%; to the parent. This bug seems to have various fixes depending on the context. Sigh IE! – Dennis Johnsen Jun 07 '16 at 08:12
12

Rather use "max-width: 100%" on the .child. – Tyler Mar 30 '17 at 00:46
2

I'm creating a table using flex (each row is a flex, with it's children having: `flex: 1 1 50%; display: flex; align-items: center;`. Not surprisingly, IE fails while word-wrapping long texts in the cells. Setting `width:100%` works, but setting `min-width: 100%` doesnt! It should, but it doesn't (like all things IE), so I tried `max-width: 99%`, and surprisingly, it *does* work. I think using `width:100%` might be better? – kumarharsh Sep 14 '17 at 11:45
Or rather, I'd go with `flex-basis:100%`. It'd make more sense, since the cell itself is also a flex container. – kumarharsh Sep 14 '17 at 11:47
1

I had to remove `flex-direction: column` on the parent for this to work. – dman Apr 06 '18 at 15:30
1

This issue seems exclusive to flex columns. Doesn't happen with flex rows. – Drazen Bjelovuk Nov 02 '18 at 18:30
1

Flex-basis 100% did it for me, had a strange bug only on IE11 where a line would appear 2 times on print. – Lumpenstein Dec 14 '18 at 14:10
`flex-basis:100%` worked perfectly for my use-case. `.child { width: 100%; }` did not. – webdevguy Mar 21 '19 at 17:32

Andry · Answer 2 · 2017-10-18T16:07:29.950

44

I had the same issue and the point is that the element was not adapting its width to the container.

Instead of using width:100%, be consistent (don't mix the floating model and the flex model) and use flex by adding this:

.child { align-self: stretch; }

Or:

.parent { align-items: stretch; }

This worked for me.

edited Oct 18 '17 at 16:07

answered Sep 07 '16 at 08:45

Andry

16,172
27
138
246

2

Yeah, this answer makes sense too (and is probably more correct than the width one). In one of my designs, setting width:100% is not possible, and this solution works well. – kumarharsh Apr 02 '19 at 08:46

dude · Answer 3 · 2018-03-09T08:08:20.873

12

As Tyler has suggested in one of the comments here, using

max-width: 100%;

on the child may work (worked for me). Using align-self: stretch only works if you aren't using align-items: center (which I did). width: 100% only works if you haven't multiple childs inside your flexbox which you want to show side by side.

edited Mar 09 '18 at 08:08

answered Jul 25 '17 at 12:58

dude

5,678
11
54
81

max-width worked for me when applied to the same container that align-items:flex-start was placed on. – Herms Apr 23 '18 at 14:34

score 11 · Answer 4 · edited Feb 08 '19 at 17:48

11

Hi for me I had to apply the 100% width to its grandparent element. Not its child element(s).

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

edited Feb 08 '19 at 17:48

brooksrelyt

3,925
5
31
54

answered May 10 '16 at 12:18

Angus Grant

312
5
14

I had "width: auto;" on grandparent. Switching to 100% fixed this for me. – jensanity5000 Jun 21 '19 at 12:51

score 4 · Answer 5 · answered May 28 '19 at 16:31

4

Somehow all these solutions didn't work for me. There is clearly an IE bug in flex-direction:column.

I only got it working after removing flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

answered May 28 '19 at 16:31

Fabian von Ellerts

4,763
40
35

score 2 · Answer 6 · answered Jan 19 '21 at 17:44

2

The easiest solution I've found is just adding max-width: 100% to the element that's going out of bounds. If you're using it on something like a carousel remember to add a class with the max-width attribute.

answered Jan 19 '21 at 17:44

user15039057

21
1

score 1 · Answer 7 · answered May 09 '20 at 07:51

1

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

This worked for me.

answered May 09 '20 at 07:51

Shruti Agrawal

366
1
9

score 0 · Answer 8 · answered Dec 29 '18 at 19:47

The proposed solutions did not help me with ".child {width: 100%;}", since I had more complicated markup. However, I found a solution - remove "align-items: center;", and it works for this case too.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

You don't need to remove `align-items: center`. See https://stackoverflow.com/a/39365207/630170 — kumarharsh, Apr 02 '19 at 08:48

score 0 · Answer 9 · answered Apr 28 '19 at 13:06

The only way I have 100% consistently been able to avoid this flex-direction column bug is to use a min-width media query to assign a max-width to the child element on desktop sized screens.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

You will need to set naturally inline child elements (eg. <span> or <a>) to something other than inline (mainly display:block or display:inline-block) for the fix to work.

score 0 · Answer 10 · answered May 13 '20 at 18:22

Me too I encountered this issue.

The only alternative is to define a width (or max-width) in the child elements. IE 11 is a bit stupid, and me I just spent 20 minutes to realize this solution.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Robert Freund · Answer 11 · 2019-12-24T10:47:44.250

-1

I did not find my solution here, maybe someone will be useful:

.child-with-overflowed-text{
  word-wrap: break-all;
}

Good luck!

edited Dec 24 '19 at 10:47

answered Dec 24 '19 at 09:07

Robert Freund

1
2

There is no such value in IE, maybe `word-wrap: break-word;` – MaxZoom Mar 12 '21 at 04:43

score -1 · Answer 12 · answered May 19 '20 at 15:32

-1

I had a similar issue with overflowing images in a flex wrapper.

Adding either flex-basis: 100%; or flex: 1; to the overflowing child fixed worked for me.

answered May 19 '20 at 15:32

Saša Nikolič

1
5

score -4 · Answer 13 · edited Aug 05 '18 at 16:43

-4

Why use a complicated solution if a simple one works too?

.child {
  white-space: normal;
}

edited Aug 05 '18 at 16:43

Asons

84,923
12
110
165

answered Aug 03 '18 at 16:25

Sergey Aldoukhov

22,316
18
72
99

Text in a flex container doesn't wrap in IE11

13 Answers13

Linked

Related