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

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:

    Text that isn't wrapping in IE10

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