Internet Explorer 10 Flexbox: Line from <p> element does not break (+Codepen)

Question

I am having flexbox issues with IE10.

Look at this snippet:

.main {
    background: gray;
    margin: 0 auto;
    max-width: 600px;
}

.box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap row;
    flex-flow: row wrap;
}

<div class="main">
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Image: http://s23.postimg.org/x70atnojd/ie10.jpg

The paragraph element within the flexbox container does not break. Any ideas how to fix this?

Answer 1

You need to add a width to your elements inside the flexbox.

So a width on your paragraph tag should do the trick.

.box p {
    width: 100%;
}