css – IE11的Flexbox max-height问题

CSS 前端之家
前端之家收集整理的这篇文章主要介绍了css – IE11的Flexbox max-height问题，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试编写分为三个部分的搜索菜单.如果没有足够的垂直空间来显示结果,则每个部件都会有一个滚动条.

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

我编写了一个适用于Chrome和Firefox的示例(Firefox很棘手,我需要添加溢出：隐藏在菜单的多个级别上).

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

解决方法

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

flex项目的最小尺寸算法.

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

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

您可以使用min-width覆盖默认值：0 / min-height：0,或使用除visible之外的任何值溢出.

将其添加到您的代码中：

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

这是一个更完整的解释：

> Why doesn’t flex item shrink past content size?

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

在你的布局中,似乎IE11只是忽略你的最大高度和最小高度规则.但是,这些规则似乎在弹性项目上正常工作.因此,使您的容器也是一个弹性项目.

将其添加到您的代码中：

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

更多信息：

> 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

猜你在找的CSS相关文章

IE浏览器兼容性调整总结技巧
前言 最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个...
css属性总结
前言 有些属性不是很常用，但是工作中遇到了，记录一下，方便学习。 1、text-indent text-...
政府网站公祭日，如何使网站整体变灰
前言 政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决...
css实现图片动画效果
需求 项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。 实现...
css实现文字渐变
html代码 css代码 效果图
移动端rem距离单位的使用
在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的...
使用 media 实现响应式布局
最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下...
教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜
因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看...
CSS盒模型之内边距、边框、外边距 十九问 （持续更新）
本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考...
轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作