Internet Explorer 10 Flexbox：来自<p>元素的行不会中断（+ Codepen）</p>

Question

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

请看这个片段：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

flexbox容器中的段落元素不会中断。任何想法如何解决这个问题？

Answer 1

您需要为flexbox中的元素添加宽度。

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

.box p {
    width: 100%;
}