IE11的Flexbox最大高度问题

小编典典

IE11的Flexbox最大高度问题

css

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

在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上缺少什么吗？

阅读 315

2020-05-16

共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忽略了弹性容器上的`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>

2020-05-16