html - IE10 中的 Flex 项目内容溢出

Question

我有以下 HTML 代码：

<div class="flex-container">
    <div class="flex-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum vel pretium tellus.</p>
    </div>
</div>

和以下CSS：

.flex-container {
    border: solid 1px black;
    display: -ms-flexbox;  /* For IE10 */
    display: flex;  /* For modern browsers. */ 
}

该代码在jsFiddle中可用。不幸的是，在 IE10 中，内部的“p”标签会导致溢出，但在现代浏览器中一切正常。如何在 IE10 中修复它？

Answer 1

在 IE 10 中测试。请参阅JSFiddle

修复css如下：

.flex-container {
    border: solid 1px black;
    display: flex;  /* For modern browsers. */
    display: flexbox;  /* For IE10 */
}