代码之家 › 专栏 › 技术社区 › Tjaart van der Walt

IE 11引导4 flexbox宽度问题溢出时Y滚动

bootstrap-4 flexbox css html

Tjaart van der Walt · 技术社区 · 8 年前

我创建了一个最小的示例来重现我在IE 11和启用overflow-y滚动时遇到的问题。

滚动条一出现,IE 11就不会以正确的宽度呈现 main div。一旦我调整浏览器窗口的大小,它就会正确呈现。

我已经在Chrome和Edge上进行了测试,它按预期工作。

您可以找到示例此处


   
    
     这是IE11第一次呈现它的方式:
    
    
     
      
     
    
    
     这就是当我调整窗口大小或打开dev工具时渲染它的方式:
    
    
     
      
     
    
    
     源代码是
     
      此处
     
    
    
     请查看IE 11中的示例
    
    <style>
.左{
项目对齐:居中;
颜色:深褐色;
背景色:0747A6;
框大小:边框框;
显示器:柔性;
弯曲方向:立柱;
宽度:64px;
填充:16px 0px;
高度:100vh;
}

.主{
宽度:100%;
显示器:柔性;
}

.菜单{
显示器:柔性;
灵活:10自动;
}
</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/>测试
</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>
main用正确的宽度进行除法。一旦我调整浏览器窗口的大小,它就会正确呈现。

我在Chrome和Edge上进行了测试,它工作正常。

你可以找到这个例子here

这是IE 11第一次呈现它的方式:



这就是当我调整窗口大小或打开dev工具时渲染它的方式:



源代码是在这里

请查看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>

1 回复 | 直到 8 年前

ReSedano 8 年前

我不明白你为什么要把显示器放在一个容器里:液体家长,但是如果你把它移走,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;对您非常重要,您还可以将“flex:1”添加到“container fluid”中。

.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>