How do you word wrap in Firefox and IE 10 while using display: -moz-box and -ms-flexbox?

Question

When you use word-wrap: break-word; with display: -moz-box; and display: -ms-flexbox the text doesn't wrap.

When using the Chrome version: display:-webkit-box; everything works great.

Here is an example:

JSFiddle

How do you center vertically and use word-wrap in IE and Firefox?

Answer 1

You can wrap the text in <p> tags and then apply the following css:

p{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
}

Live Demo: http://jsfiddle.net/d6Y4Z/10/