undefinedfix
Sign in

flex- direction:column Internal nested flex layout is not supported in IE

pxbxv edited in Thu, 01 Sep 2022

There's a compatibility issue, flex- direction:column Internal nested flex layout, in IE can't do without support, height is 0 problem, please have a solution?

Codepen (ie not supported) https://codepen.io/hzsrc/pen/...

Reproduction method: the following html is saved and opened with ie:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
</head>
<body>
<div style="display: flex;flex-flow:column">
    <div style="flex: 1 0">
        <div style="display: flex">
            <div style="flex: 1 0 50%">
                222
            </div>
            <div style="flex: 1 0 50%">
                333
            </div>
        </div>
    </div>

    <div style="flex: 1 0;">
        <div style="display: flex">

            <div style="flex: 1 0 50%">
                444
            </div>
            <div style="flex: 1 0 50%">
                555
            </div>
        </div>
    </div>
</div>
</body>
</html>
2 Replies
xtu
commented on Thu, 01 Sep 2022

Remove flex: 10?

KevKosDev
commented on Thu, 01 Sep 2022

Thank you. It's settled. In ie11, flex: 1 resolves to 110 instead of 11 Auto in other browsers https://www.cnblogs.com/SamWe...

lock This question has been locked and the reply function has been disabled.