Question

我将以下CSS和HTML作为重现此问题的最低要求。在Chrome上一切正常。 IE11没有。有没有一种方法可以修复CSS和HTML，使其在Chrome和IE11上都能正常工作？

<html>
    <style>
        .max-box {
            background-color: #00e;
            width: 100px;
            max-height: 80%;
            padding: 5px;
            display: flex;
            flex: 1 1 auto;
        }
        .fixed-box {
            background-color: #00e;
            width: 100px;
            height: 100px;
            padding: 5px;
            display: flex;
            flex: 1 1 auto;
        }
        .wrapper {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
        }
        .content {
            background-color: #0e0;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            overflow: auto;
        }
        .footer {
            background-color: #e00;
            display: flex;
            flex: 0 0 auto;
        }
    </style>
    <body>
        <div class="max-box" style="float: left">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
        <div class="max-box" style="float: left">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
        <div class="fixed-box">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
    </body>
</html>

因此，要求就是Chrome的行为：

如果内容很少，框1将不会占用下面的空间。
方框2将最多占据浏览器高度的80％，并且内容是可滚动的。如果浏览器高度发生变化则响应。
第3格是固定高度，其内容可滚动并且与第2格相同。

IE11失败的原因是：

当浏览器的高度更改为小于内容时，框1和框2不会使内容滚动。
方框3的内容是可滚动的，但所有值都狭窄。

Answer 1

因为这似乎没有答案，所以我会尝试给你我两美分。 IE和其他浏览器通常需要autoprefixer才能使flexbox正常工作。请尝试以下操作，这恰好是您的代码通过autoprefixer运行

        .max-box {
            background-color: #00e;
            width: 100px;
            max-height: 80%;
            padding: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
        }
        .fixed-box {
            background-color: #00e;
            width: 100px;
            height: 100px;
            padding: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
        }
        .wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        .content {
            background-color: #0e0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            overflow: auto;
        }
        .footer {
            background-color: #e00;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
        }

具有最大身高和弹性的DIV在IE11上无法正常工作

1 个答案: