mardi 21 avril 2015

Flex div not wrapping text in IE11 but in Chrome, FF and Opera

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 working in FF and Chrome but not in IE11:

http://ift.tt/1Jq9vxp

What should I do to get the text inside the inner div to wrap in IE?

Aucun commentaire:

Enregistrer un commentaire