IE11 flexbox preventing text wrapping? [closed]

Answer 1

Just remove

align-items: flex-start

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

Answer 2

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

Answer 3

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 4

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