IE11的Flexbox最大高度问题

Question

我正在尝试编写分为三个部分的搜索菜单。 如果没有足够的垂直空间来显示结果，则每个部件都会有一个滚动条。

在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上遗漏了什么吗？

Answer 1

您需要在此布局中解决两个问题才能在Chrome，Safari，Firefox和IE11中使用。

flex项目的最小尺寸算法。

默认情况下，弹性项不能小于其内容的大小。 最小尺寸在规格中定义为min-width: auto和min-height: auto 。

有些浏览器会自行调整此设置（这就是您的布局在Chrome中运行的原因）。 其他浏览器要求您覆盖默认设置（这是FF和IE11所需的设置）。

您可以使用min-width: 0覆盖默认值min-width: 0 / min-height: 0 ，或使用除visible之外的任何值overflow 。

将其添加到您的代码中：

.flex-wrapper .flex-wrapper-inner .column-wrapper {
    flex-grow: 1;
    display: flex;
    overflow: hidden;; /* IE11 & Firefox fix */
}

这是一个更完整的解释：

• 为什么flex项目不会缩小内容大小？

---

IE11忽略了Flex容器上的`max-height`和`min-height`。

在你的布局中，似乎IE11只是忽略你的max-height和min-height规则。 但是，这些规则似乎在弹性项目上正常工作。 因此，使您的容器也是一个弹性项目。

将其添加到您的代码中：

body {
  display: flex; /* IE11 fix */
}

更多信息：

• 在IE中忽略了flex容器min-height
• https://github.com/philipwalton/flexbugs

---

 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> 

jsFiddle演示