Question

HTML

<div style="display: flex; flex-direction: column;">
    <div style="flex: 0 0 20px;">top</div>
    <div style="display: flex; flex-direction: row;">
        <div style="flex: 0 0 30px;">left</div>
        <div style="flex: 1 1 auto;     display: flex; flex-direction: column;">
            <div style="flex: 0 0 100px;">header</div>

            <!-- text is not wrapping inside this cell in IE11 -->
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique.</div>

            <div style="flex: 0 0 100px;">footer</div>
        </div>
        <div style="flex: 0 0 30px;">right</div>
    </div>
    <div style="flex: 0 0 20px;">bottom</div>
</div>

JSFiddle在FF和Chrome中工作但不在IE11中工作：

http://jsfiddle.net/uu0uqkfo/

我该怎么做才能让内部div中的文本包装在IE中？

Answer 1

为包含标题，主页和页脚的div指定flex: 1;而不是flex: 1 1 auto;：

div {
    border: solid 1px red;
}

    <div style="display: flex; flex-direction: column;">
        <div style="flex: 0 0 20px;">top</div>
        <div style="display: flex; flex-direction: row;">
            <div style="flex: 0 0 30px;">left</div>
            <div style="flex: 1; 	display: flex; flex-direction: column;">
                <div style="flex: 0 0 100px;">header</div>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique. </div>
                <div style="flex: 0 0 100px;">footer</div>
            </div>
            <div style="flex: 0 0 30px;">right</div>
        </div>
        <div style="flex: 0 0 20px;">bottom</div>
    </div>

只有这一改变，一切都在IE 11中按预期工作。

Answer 2

使用flex: 1;代替flex: 1 1 auto;

查看更新的小提琴

http://jsfiddle.net/uu0uqkfo/1/

Flex div不包含IE11中的文本，而是Chrome，FF和Opera

2 个答案: