Flex 布局的圣杯内容不会在 IE11 上增长

Question

更新 我尝试将height:100vh 添加到.app-container，但它不起作用。

我正在使用bootstrap 4 来设计我的网络应用程序。 我正在尝试为它设计Holy grail layout。

Chrome 上的一切似乎都很好，但IE 11。 在 chrome 上，我的布局是：

但是IE 11上的内容和上面不一样：

绿色区域的增长不像 Chrome 中那样。

这是我正在使用的layout.scss 课程：

.app-container {

  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 100vh;


  .app-navigation-bar-container {
    flex: none;
    -ms-flex: none;
    -webkit-flex: none;
    margin-bottom: 5px;
  }

  .app-content-container {
    flex: 1;
    -ms-flex: auto;
    -webkit-flex: 1;
    background-color: green;
  }

  .app-footer {
    background-color: blue;
    height: 50px;
  }
}

$navbar-wrapper-height: 65;
$navbar-inner-wrapper-height: 55;
$navbar-panel-margin-bottom: 5;


.navbar-wrapper {
  height: #{$navbar-wrapper-height}px;
  position: inherit;

  .navbar-inner-wrapper {
    height: #{$navbar-inner-wrapper-height}px;

    .navbar-panel {
      display: flex;
      flex-direction: row;
      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      margin-bottom: #{$navbar-panel-margin-bottom}px;

      .navbar-item {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        border-right: white solid 1px;

        &:first-child {
          padding-left: inherit;
        }

        &:last-child {
          padding-right: inherit;
          border-right: inherit;
        }

        .main {
          color: white;
          font-weight: bold;
          font-size: 16px;
        }

        .sub-header {
          color: white;
        }
      }
    }
  }
}

.navbar-divider {
  background-color: #ee8a01;
  height: 5px;
  margin-top: #{$navbar-wrapper-height - $navbar-inner-wrapper-height - $navbar-panel-margin-bottom}px;
}

.bg-red {
  background-color: #d61a0c;

  a {
    color: white;
  }
}

这是我的codepen

谁能帮帮我？

谢谢，

Answer 1

要解决这个问题，你可以给 flex 容器添加一个特定的高度：min-height: 100vh; 必须变成height: 100vh;，因为这个 IE11 错误：

在 IE10 和 IE11 中，带有 display: flex 和 flex-direction 的容器： 如果列将无法正确计算其弯曲子项的大小 容器有 min-height 但没有明确的 height 属性 https://caniuse.com/#search=flex

之后，请将flex-shrink: 0; 或简写flex: 1 0 auto; 添加到您的.app-content-container

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /*min-height: 100vh;*/
}
.app-container .app-navigation-bar-container {
  flex: none;
  margin-bottom: 5px;
}
.app-container .app-content-container {
  /*flex: 1 0 auto; 
  background-color: green;*/

  flex: 1;
  -ms-flex: auto;
  -webkit-flex: 1;
  background-color: green;

  flex-shrink: 0; /* --> add this */
}
.app-container .app-footer {
  background-color: blue;
  min-height:50px;
}

.navbar-wrapper {
  height: 65px;
  position: inherit;
}
.navbar-wrapper .navbar-inner-wrapper {
  height: 55px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  margin-bottom: 5px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  border-right: white solid 1px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:first-child {
  padding-left: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:last-child {
  padding-right: inherit;
  border-right: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .main {
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .sub-header {
  color: white;
}

.navbar-divider {
  background-color: #ee8a01;
  height: 5px;
  margin-top: 5px;
}

.bg-red {
  background-color: #d61a0c;
}
.bg-red a {
  color: white;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body style="min-height: 100%;" _nghost-c0="" ng-version="6.1.9">
    <router-outlet _ngcontent-c0=""></router-outlet>
    <authorize-layout _nghost-c1="">
        <div _ngcontent-c1="" class="app-container">
            <div _ngcontent-c1="" class="app-navigation-bar-container">
                <navigation-bar _ngcontent-c1="" _nghost-c2="">
                    <div _ngcontent-c2="" class="navbar-wrapper">
                        <div _ngcontent-c2="" class="bg-red navbar-inner-wrapper">
                            <div _ngcontent-c2="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1 navbar-panel">
                                <div _ngcontent-c2="" class="flex-grow-1"><img _ngcontent-c2="" style="height: 65px;" src="https://via.placeholder.com/150x65"></div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 01</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 01</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 02</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 02</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 03</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 03</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 04</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 04</div>
                                </div>
                            </div>
                        </div>
                        <div _ngcontent-c2="" class="navbar-divider"></div>
                    </div>
                </navigation-bar>
            </div>
            <div _ngcontent-c1="" class="app-content-container">
                <div _ngcontent-c1="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1">
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
              

                </div>
            </div>
            <div _ngcontent-c1="" class="app-footer"></div>
        </div>
    </authorize-layout>
</body>

通过 IE11、Firefox 和 Chrome 测试。 希望能帮助到你。 :)