Text in a flex container doesn't wrap in IE11

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

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

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.

Answer 6

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.