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

Question

我在使用 IE10 时遇到了 Flexbox 问题。

看看这个片段:

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

图片:http://s23.postimg.org/x70atnojd/ie10.jpg

Flexbox 容器内的段落元素不会中断。有什么想法可以解决这个问题吗？

Answer 1

您需要为 flex 盒内的元素添加宽度。

因此段落标签上的宽度应该可以解决问题。

.box p {
    width: 100%;
}