我正在尝试编写分为三个部分的搜索菜单。如果没有足够的垂直空间来显示结果，每个部分都会有一个滚动条。
在Chrome和Firefox中，每个菜单都会显示其滚动条，但在IE11上，菜单会与包装器重叠。
我编写了一个适用于Chrome和Firefox的示例（Firefox很棘手，我需要在菜单的多个级别添加overflow: hidden）。
.flex-wrapper {
display: flex;
margin: 20px auto;
width: 1184px;
max-height: 80vh;
border: 2px solid red;
min-height: 150px;
}
.flex-wrapper .flex-wrapper-inner {
display: flex;
width: 100%;
flex-direction: column;
}
.flex-wrapper .flex-wrapper-inner .header {
display: flex;
flex-shrink: 0;
width: 100%;
}
.flex-wrapper .flex-wrapper-inner .header H4 {
flex: 1;
}
.flex-wrapper .flex-wrapper-inner .column-wrapper {
flex-grow: 1;
display: flex;
}
.flex-wrapper .flex-wrapper-inner .column {
flex: 1;
overflow-y: auto;
}
.flex-wrapper .flex-wrapper-inner .column H4 {
text-align: center;
}
.box-results-users .list-group-item {
margin: 0;
}
.box-results-users .list-group-item IMG {
height: 60px;
width: 60px;
}
.box-results {
position: relative;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-wrapper">
<div class="flex-wrapper-inner">
<div class="header">
<h4>Box 1</h4>
<h4>Box 2</h4>
<h4>Box 3</h4>
</div>
<div class="column-wrapper">
<div class="column">
<div class="box-results list-group">
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div>
</div>
<div class="column">
<div class="box-results">
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div>
</div>
<div class="column">
<div class="box-results box-results-users">
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4>
...
</div>
</div>
</div>
</div>
</div>
</div>
我在IE 11上遗漏了什么吗？
答案 0 :(得分：8)
在此布局中，您需要解决两个问题才能在Chrome，Safari，Firefox和IE11中使用。
默认情况下，弹性项目不能小于其内容的大小。最小尺寸在规范中定义为min-width: auto和min-height: auto。
有些浏览器会自行调整此设置（这就是您的布局在Chrome中运行的原因）。其他浏览器要求您覆盖默认设置（这是FF和IE11中所需的设置）。
您可以使用min-width: 0 / min-height: 0覆盖默认值，或使用overflow以外的任何值覆盖visible。
将此添加到您的代码中：
.flex-wrapper .flex-wrapper-inner .column-wrapper {
flex-grow: 1;
display: flex;
overflow: hidden;; /* IE11 & Firefox fix */
}
以下是一个更完整的解释：
在您的布局中，IE11似乎只是忽略了您的max-height和min-height规则。但是，这些规则似乎在弹性项目上正常工作。因此，使您的容器也是一个弹性项目。
将此添加到您的代码中：
body {
display: flex; /* IE11 fix */
}
更多信息：
body {
display: flex; /* IE11 fix */
}
.flex-wrapper {
display: flex;
margin: 20px auto;
width: 1184px;
max-height: 80vh;
border: 2px solid red;
smin-height: 150px;
flex-shrink: 0; /* override default `flex-shrink: 1` */
}
.flex-wrapper .flex-wrapper-inner {
display: flex;
width: 100%;
flex-direction: column;
}
.flex-wrapper .flex-wrapper-inner .header {
display: flex;
flex-shrink: 0;
width: 100%;
}
.flex-wrapper .flex-wrapper-inner .header H4 {
flex: 1;
}
.flex-wrapper .flex-wrapper-inner .column-wrapper {
flex-grow: 1;
display: flex;
overflow: hidden;; /* IE11 & Firefox fix */
}
.flex-wrapper .flex-wrapper-inner .column {
flex: 1;
overflow-y: auto;
}
.flex-wrapper .flex-wrapper-inner .column H4 {
text-align: center;
}
.box-results-users .list-group-item {
margin: 0;
}
.box-results-users .list-group-item IMG {
height: 60px;
width: 60px;
}
.box-results {
position: relative;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex-wrapper">
<div class="flex-wrapper-inner">
<div class="header">
<h4>Box 1</h4>
<h4>Box 2</h4>
<h4>Box 3</h4>
</div>
<div class="column-wrapper">
<div class="column">
<div class="box-results list-group">
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div>
</div>
<div class="column">
<div class="box-results">
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
<a class="list-group-item" href="#">Quisque coeptis possedit radiis. Ardentior et contraria et quinta feras</a>
</div>
</div>
<div class="column">
<div class="box-results box-results-users">
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
<div class="media list-group-item">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://randomuser.me/api/portraits/men/38.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">User Test</h4> ...
</div>
</div>
</div>
</div>
</div>
</div>