溢出-y滚动时的IE 11 bootstrap 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 会说“啊，现在我明白你真正想从我这里得到什么了，伙计。对不起！” :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;对你来说很重要，你也可以在'container-fluid'中添加“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>