Internet Explorer 10 Flexbox：<p> 元素中的行不中断（+Codepen）答案

【问题标题】：Internet Explorer 10 Flexbox: Line from <p> element does not break (+Codepen)Internet Explorer 10 Flexbox：<p> 元素中的行不中断（+Codepen）
【发布时间】：2019-04-19 20:29:37
【问题描述】：

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

看看这个sn-p：

.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 容器中的段落元素不会中断。任何想法如何解决这个问题？

【问题讨论】：

我又遇到了问题，找到了我自己的 Stackoverflow 线程。 :D 在寻找这个问题的解决方案几个小时后，我发现了一个错误修复：将此添加到我的 Codepen：.box p {flex: 1;}

标签： css flexbox line internet-explorer-10 word-wrap

【解决方案1】：

您需要为弹性框内的元素添加宽度。

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

.box p {
    width: 100%;
}

【讨论】：