IE10 Flexbox P element non-wrapping

Question

http://jsfiddle.net/pvJRK/2/

Basically in IE10 a p element which has text wider than it\'s parent when the \"direction\" is a row, will overflow, and subsequently pu

Answer 1

It doesn't make any sense to me, but adding -ms-flex: 0 1 auto or -ms-flex: 1 1 auto to the paragraph and aside corrects it in IE10. By default, elements are supposed to have flex: 0 1 auto applied to them when they become flex items.

http://jsfiddle.net/pvJRK/3/

Answer 2

The accepted answer did not work for me.

My problem (http://jsfiddle.net/Hoffmeyer/xmjs1rmq/) was solved as described in flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

Set

max-width: 100%

Answer 3

For me, I needed to do this before it would start working for me:

(using classes for clarity and not including prefixes for brevity)

HTML:

<a class="flex">
    <span class="flex-child">Text that isn't wrapping in IE10</span>
</a>

CSS:

.flex {
    display: flex;
}

.flex-child {
    display: block;
    max-width: 100%;
    flex-shrink: 1;
}

Notice that you need to set naturally inline child elements to something other than inline (mainly display:block or display:inline-block) for the fix to work.

Thanks previous answers for getting me most of the way there though :)

Update:

The above technique does not work if flex-direction is set to column.

My recommendation for when flex-direction is set to column is to use a min-width media query to assign a max-width on desktop.

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

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

Answer 4

Adding flex-shrink: 1 to the parent of the elements which need wrapping has fixed this for me in IE10.

Note: flex: 1 1 auto (or -ms-flex) is a shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: auto

In this case, it is specifically flex-shrink that will fix the issue. This property should be 1 by default, so I assume this is a bug with the IE10 implementation of flex box and by explicitly setting its value, it fixes the bug.

Answer 5

this picture show the defult flex mean in IE 10, flex-shrink default in IE10 is 0; so if the code is:

.title {
   display: flex;
   justify-content: space-between;
}

<div class="title">
    <span class="title-name">some word word word</span>
    <label >some one checkbox</label>
</div>

but the span will not wrap in IE10, so the code need to be this:

.title {
    display: flex;
    justify-content: space-between;
}
.title-name{
    display: block;
    flex-shrink: 1;
}