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

查看：17
本文介绍了IE11 的 Flexbox 最大高度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

在 Chrome 和 Firefox 中，每个菜单都显示其滚动条，但在 IE11 上，菜单与包装器重叠.

我编写了一个适用于 Chrome 和 Firefox 的示例(Firefox 很棘手，我需要在菜单的多个级别添加 overflow: hidden).

.flex-wrapper {显示:弹性；边距:20px 自动；宽度:1184px；最大高度:80vh；边框:2px纯红色；最小高度:150px；}.flex-wrapper .flex-wrapper-inner {显示:弹性；宽度:100%；弹性方向:列；}.flex-wrapper .flex-wrapper-inner .header {显示:弹性；弹性收缩:0；宽度:100%；}.flex-wrapper .flex-wrapper-inner .header H4 {弹性:1；}.flex-wrapper .flex-wrapper-inner .column-wrapper {弹性增长:1；显示:弹性；}.flex-wrapper .flex-wrapper-inner .column {弹性:1；溢出-y:自动；}.flex-wrapper .flex-wrapper-inner .column H4 {文本对齐:居中；}.box-results-users .list-group-item {边距:0；}.box-results-users .list-group-item IMG {高度:60px；宽度:60px；}.box 结果{位置:相对；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="flex-wrapper"><div class="flex-wrapper-inner"><div class="header"><h4>框1</h4><h4>框2</h4><h4>框3</h4>

<div class="column-wrapper"><div 类=列"><div class="box-results list-group"><a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras

<div 类=列"><div class="box-results"><a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras

<div 类=列"><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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

我在 IE 11 上遗漏了什么吗?

解决方案

您需要解决此布局中的两个问题，才能使其在 Chrome、Safari、Firefox 和 IE11 中运行.

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

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

有些浏览器会自行调整此设置(这就是您的布局在 Chrome 中工作的原因).其他浏览器要求您覆盖默认设置(这是 FF 和 IE11 中需要的).

您可以使用 min-width: 0/min-height: 0 或 overflow 使用除 以外的任何值覆盖默认值代码>可见.

将此添加到您的代码中:

.flex-wrapper .flex-wrapper-inner .column-wrapper {弹性增长:1；显示:弹性；溢出:隐藏；；/* IE11 &火狐修复 */}

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

<小时>

IE11 忽略了 flex 容器上的 `max-height` 和 `min-height`.

在您的布局中，IE11 似乎只是忽略了您的 max-height 和 min-height 规则.然而，这些规则似乎在弹性项目上运行良好.所以让你的容器也成为一个弹性项目.

将此添加到您的代码中:

body {显示:弹性；/* IE11 修复 */}

更多信息:

<小时>

body {显示:弹性；/* IE11 修复 */}.flex 包装器 {显示:弹性；边距:20px 自动；宽度:1184px；最大高度:80vh；边框:2px纯红色；最小高度:150px；弹性收缩:0；/* 覆盖默认的`flex-shrink: 1` */}.flex-wrapper .flex-wrapper-inner {显示:弹性；宽度:100%；弹性方向:列；}.flex-wrapper .flex-wrapper-inner .header {显示:弹性；弹性收缩:0；宽度:100%；}.flex-wrapper .flex-wrapper-inner .header H4 {弹性:1；}.flex-wrapper .flex-wrapper-inner .column-wrapper {弹性增长:1；显示:弹性；溢出:隐藏；；/* IE11 &火狐修复 */}.flex-wrapper .flex-wrapper-inner .column {弹性:1；溢出-y:自动；}.flex-wrapper .flex-wrapper-inner .column H4 {文本对齐:居中；}.box-results-users .list-group-item {边距:0；}.box-results-users .list-group-item IMG {高度:60px；宽度:60px；}.box 结果{位置:相对；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="flex-wrapper"><div class="flex-wrapper-inner"><div class="header"><h4>框1</h4><h4>框2</h4><h4>框3</h4>

<div class="column-wrapper"><div 类=列"><div class="box-results list-group"><a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras

<div 类=列"><div class="box-results"><a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras<a class="list-group-item" href="#">Quisque coeptis possedit radiis.Ardentior et contraria et quinta feras

<div 类=列"><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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

<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 class="media-body"><h4 class="media-heading">用户测试</h4>...

jsFiddle 演示

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:

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: 

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆