溢出时，IE 11引导程序4 flexbox宽度问题

Question

我创建了一个最小的示例来重现启用溢出y滚动时IE 11和flex-box宽度的问题。

滚动条出现后，IE 11不会立即以正确的宽度渲染main div。调整浏览器窗口的大小后，它将正确呈现。

我已经在chrome和Edge上进行了测试，并且工作正常。

您可以找到示例here

这是IE 11首次呈现的方式：

这是我调整窗口大小或打开开发工具后立即呈现的方式：

源代码为here

请查看IE 11中的示例

<style>
    .left {
        align-items: center;
        color: #deebff;
        background-color: #0747a6;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 64px;
        padding: 16px 0px;
        height: 100vh;
    }

    .main {
        width: 100%;
        display: flex;
    }

    .menu {
        display: flex;
        flex: 1 0 auto;
    }
</style>

<div style="display: flex">
    <div class="left"></div>
    <div class="main">
        <div class="menu"></div>
        <div style="width: 100%;    display: flex;    max-height: 100vh;    overflow-y: auto;    padding: 25px;">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        col1
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br /> test
                    </div>
                    <div class="col-md-6 col-lg-4">
                        col2
                    </div>
                    <div class="col-md-6 col-lg-4">
                        col3
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我不明白您为什么要在容器流体的父级中放置display：flex，但是如果删除它，IE11会说：“ Aaah，现在我知道您真正想要我了，伙计。对不起！” ：P

在IE11上尝试一下，在我的网站上效果很好。

.left {
            align-items: center;
            color: #deebff;
            background-color: #0747a6;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 64px;
            padding: 16px 0px;
            height: 100vh;
        }

        .main {
            width: 100%;
            display: flex;
            
        }

        .menu {
            display: flex;
            flex: 1 0 auto;
            
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
        <div style="display: flex">
        <div class="left"></div>
        <div class="main">
            <div class="menu"></div>
            <div style="width: 100%;       max-height: 100vh;    overflow-y: auto;    padding: 25px;">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 col-lg-4">
                            col1
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br /> test
                        </div>
                        <div class="col-md-6 col-lg-4">
                            col2
                        </div>
                        <div class="col-md-6 col-lg-4">
                            col3
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

解决方案2：

相反，如果display：flex;对您来说非常重要，您也可以在“容器流体”中添加“ flex：1”

.left {
            align-items: center;
            color: #deebff;
            background-color: #0747a6;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 64px;
            padding: 16px 0px;
            height: 100vh;
        }

        .main {
            width: 100%;
            display: flex;
            
        }

        .menu {
            display: flex;
            flex: 1 0 auto;
        
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
     <div style="display: flex">
        <div class="left"></div>
        <div class="main">
            <div class="menu"></div>
            <div style="width: 100%;   display:flex; max-height: 100vh;    overflow-y: auto;    padding: 25px;">
                <div class="container-fluid" style="flex:1">
                    <div class="row">
                        <div class="col-md-6 col-lg-4">
                            col1
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br /> test
                        </div>
                        <div class="col-md-6 col-lg-4">
                            col2
                        </div>
                        <div class="col-md-6 col-lg-4">
                            col3
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>