Flex div不是在IE11中而是在Chrome，FF和Opera中包裝文字

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

指定flex: 1; 代替flex: 1 1 auto; 對於包含頁眉，主要和頁腳的div：

 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/