IE11 的 Flexbox 最大高度问题

Question

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

在 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 中工作，您有两个问题需要解决。

弹性项目的最小尺寸算法。

默认情况下，弹性项目不能小于其内容的大小。最小大小在规范中定义为 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 忽略了弹性容器上的“最大高度”和“最小高度”。

在您的布局中，IE11 似乎只是忽略了您的 max-height 和 min-height 规则。但是，这些规则似乎适用于弹性项目。因此，让您的容器也成为弹性项目。

将此添加到您的代码中：

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

更多信息：

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>

IE11 的 Flexbox 最大高度问题

Flexbox max-height issue with IE11

css

internet-explorer

flexbox

internet-explorer-11

弹性项目的最小尺寸算法。

IE11 忽略了弹性容器上的“最大高度”和“最小高度”。

jsFiddle demo