html - 溢出-y滚动时的IE 11 bootstrap 4 flexbox宽度问题
问题描述
flex-box
我创建了一个最小示例来重现启用溢出-y 滚动时我在 IE 11 和宽度上遇到的问题。
一旦滚动条出现,IE 11 就不会main
以正确的宽度呈现 div。只要我调整浏览器窗口的大小,它就会正确呈现。
我已经在 chrome 和 Edge 上进行了测试,它按预期工作。
您可以在此处找到示例
这是 IE 11 第一次呈现它的方式:
这就是我在调整窗口大小或打开开发工具后立即呈现的方式:
源代码在这里
请查看 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>
解决方案
我不明白你为什么将 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>
推荐阅读
- java - 如何确保一组实现接口的 Spring Boot bean 在其容器被初始化之前首先被初始化?
- python - python pandas按子串融化列
- vue.js - vue-i18n 无法翻译 keypath 的值。使用 keypath 的值作为默认值
- reactjs - React Hooks setState in useEffect 一次在 ref mount
- c++ - 如何在 C 中自定义编译指示?
- gpu - nvcc 如何使用多代代码进行编译?
- windows-7 - 在 Windows 7 上安装 Mimetex
- c++ - 变量“PlayerInfo::HistoryGuess”未初始化。总是初始化一个成员变量(type.6)错误不断出现
- python - 获取 _pickle.UnpicklingError: invalid load key, 'v' when running agent of craftassist
- spring - docker镜像运行无法访问spring boot gradle中的api