IE11的Flexbox最大高度问题
陆高峰
问题内容：
问题答案：
IE11忽略了弹性容器上的
我正在尝试编写一个分为三部分的搜索菜单。如果没有足够的垂直空间显示结果，则每个部分都会有一个滚动条。
在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上缺少什么吗？
问题答案：
要在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。
在您的布局中，看来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>
类似资料：
-
我遇到的问题是，当我在Flexbox中输入内容时，它的高度会增加。我不是100%确定为什么会发生这种情况，但我相信这与它没有处于绝对位置，从而保持其高度属性有关。 包括代码笔，我在这里为我正在制作的Flexbox风格的站点设置了HTML和CSS（也包括下面的代码片段），这里有一些关于它的信息 1-我有一个围绕网站内容的包装div，这样我可以控制背面的流程和背景 2-我为Flexbox的每一“行”设
-
问题内容： 如果使用IE11，似乎无法正确计算弹性项目宽度。 4个盒子每个都有flex-basis：50％，所以我们应该得到两行，每个盒子两个，但是在IE11中，每个盒子只有一行。将边框设置为0时，它可以正常工作。 知道这是一个错误还是有办法使IE11表现出来（并且仍然使用边框）？ PS值得庆幸的是，在我的项目中，仅需要支持流行浏览器的最新版本，但是IE11就是其中之一。 问题答案： 使用该属性计
-
我在Firefox 34及以上版本中发现了一个与显示行为有关的错误： flex。 我可以确认代码在所有现代浏览器中都一直有效，现在仍然有效，但是Firefox34和最近的Firefox35测试版的行为完全不一致。 我制作了一把小提琴，展示了不同的行为：http://jsfiddle.net/ntkawu63/ 在Firefox34中启动它，它将忽略图像上的最大宽度：100%。在任何其他浏览器中，包
-
问题内容： 编写CSS媒体查询时，有什么方法可以使用“或”逻辑指定多个条件？ 我正在尝试做这样的事情： 问题答案： 使用逗号指定两个（或多个）不同的规则： 从https://developer.mozilla.org/en/CSS/Media_queries/ …此外，您可以在逗号分隔的列表中组合多个媒体查询；如果列表中的任何媒体查询为true，则将应用关联的样式表。这等效于逻辑“或”运算。
-
问题内容： 我有一个表，我想定义和属性。请参见下面的示例。 我现在的问题是浏览器无法使用它。如果我在它上定义它，将被忽略，如果我在一个元素内的一个元素中定义它，则内容具有正确的最小和最大宽度，但表的大小仍然相同。（所以有很多可用空间：/） 我该如何解决？ 编辑：我只是注意到问题似乎仅在表处于全屏模式时才会发生。但是，元素的最大宽度不应大于！ 例： 问题答案： 对于表单元格，应使用’width’属性
-
以下是HTML： 包装器div具有css：position：relative；宽度：100%；身高：100%；高度：0；垫底：56.25%；溢出：隐藏； iframe具有CSS： 容器具有CSS： 我试图在窗口调整大小时保护iframe的16：9的纵横比，并保持它的最大高度为100%-67px calc(100%-67px)。我怎样才能同时做到这两件事呢？