与IE11的Flexbox最大高度问题 [英] Flexbox max-height issue with IE11

问题描述

我试图编码一个分为三部分的搜索菜单。在Chrome和Firefox中，每个菜单都显示其滚动条，但是在IE11上，菜单我已经编写了一个适用于Chrome和Firefox的示例（Firefox非常棘手，我需要添加 overflow：hidden / code>在菜单的多个级别上）。

。 flex-wrapper {display：flex; margin：20px auto;宽度：1184px;最大高度：80vh;边框：2px纯红色; min-height：150px;}。flex-wrapper .flex-wrapper-inner {display：flex;宽度：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;}。 -users .list-group-item IMG {height：60px; box-results {position：relative;}

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =flex-wrapper > < div class =flex-wrapper-inner> < div class =header> < h4>方框1< / h4> < h4>框2< / h4> < h4>框3< / h4> < / DIV> < div class =column-wrapper> < div class =column> < div class =box-results list-group> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < / DIV> < / DIV> < div class =column> < div class =box-results> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> 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-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < / DIV> < / DIV> < / DIV>我在IE 11上丢失了什么东西？我在IE 11上丢失了一些东西？/？>？

解决方案

在这个布局中，有两个问题需要在Chrome，Safari，Firefox和IE11中运行。 >

弹性物品的最小尺寸算法。

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

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

你可以用 min-您可以使用以下任何值： / min-height：0 或溢出 可见。

添加到您的代码中：

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

这里有一个更完整的解释：

• 为什么不能收缩过去的内容大小？

---

IE11忽略了max-height和min-height在你的flex容器上。

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

将此代码添加到您的代码中：

  body {
 display：flex; / * IE11修复* / 
} 
  

更多信息：

• flex container min在IE浏览器中高度忽略


• https：// github。 com / philipwalton / flexbugs

---

  body {display：flex; / * IE11修复* /}。flex-wrapper {display：flex; margin：20px auto;宽度：1184px;最大高度：80vh;边框：2px纯红色; smin-height：150px; flex-shrink：0; / *重写默认`flex-shrink：1` * /}。flex-wrapper .flex-wrapper-inner {display：flex;宽度：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;显示：flex;溢出：隐藏;; / * 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;}。 -users .list-group-item IMG {height：60px; box-results {position：relative;}  

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =flex-wrapper > < div class =flex-wrapper-inner> < div class =header> < h4>方框1< / h4> < h4>框2< / h4> < h4>框3< / h4> < / DIV> < div class =column-wrapper> < div class =column> < div class =box-results list-group> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < / DIV> < / DIV> < div class =column> < div class =box-results> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> Quisque coeptis possedit radiis。 Ardentior et contraria et quinta feras< / a> < a class =list-group-itemhref =＃> 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-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < div class =media list-group-item> < div class =media-left> < a href =＃> < img class =media-objectsrc =https://randomuser.me/api/portraits/men/38.jpgalt =...> < / A> < / DIV> < div class =media-body> < h4 class =media-heading>使用者测试< / h4> ...< / div> < / DIV> < / DIV> < / DIV> < / DIV> < / div>

/jsfiddle.net/o0uk6etv/5/rel =nofollow noreferrer> jsFiddle demo

I'm trying to code a search menu separated in three parts. Each part will have a scrollbar if there's not enough vertical space for the results to display.

In Chrome and Firefox, each menu displays its scrollbar, but on IE11, the menus overlap the wrapper.

I've coded a sample which works on Chrome and Firefox (Firefox was tricky, I needed to add overflow: hidden on multiple levels of the menu).

.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>

Am I missing something on IE 11 ?

解决方案

You have two problems to address in this layout for it to work in Chrome, Safari, Firefox and IE11.

The minimum sizing algorithm on flex items.

A flex item, by default, cannot be smaller than the size of its content. The minimum size is defined in the spec as min-width: auto and min-height: auto.

Some browsers take it upon themselves to adjust this setting (which is why your layout works in Chrome). Other browsers require you to override the default setting (which is what is needed in FF and IE11).

You can override the default with min-width: 0 / min-height: 0, or overflow with any value other than visible.

Add this to your code:

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

Here's a more complete explanation:

• Why doesn't flex item shrink past content size?

---

IE11 is ignoring the `max-height` and `min-height` on your flex container.

In your layout, it appears that IE11 is simply ignoring your max-height and min-height rules. However, these rules appear to work fine on flex items. So make your container also a flex item.

Add this to your code:

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

More information:

• flex container min-height ignored in IE
• 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 demo

这篇关于与IE11的Flexbox最大高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！