IE 11 flex布局兼容性問題 ---- 不支持min-height 和flex:1

　　由於最近項目要嵌入其它平台，所以要做IE11 的兼容，那就用IE11打開網頁看一看，一看嚇一跳，頁腳直接到了頁眉的下面，並把主要內容覆蓋了，也就是stick footer 布局失效了，我寫了一個簡易的代碼來摸擬這種情況，這是一個vue 的項目，頁面的整體布局都放到了app.vue中，頁面三個部分構成： 頁眉，中間內容，頁腳。頁眉和頁腳都是固定的，中間部分由內容撐開，典型的stick footer 布局。中間部分，左右兩列，新建了兩個組件，在component 文件夾下。項目目錄結構如下

　　app.vue 代碼如下：

<template>
    <div class="wrapper">
      <!-- 頁眉 -->
      <header>Header</header>
      <!-- 中間內容 -->
      <section class="content-wrapper">
        <side-section></side-section>
        <people class="article"/>
      </section>
      <!-- 頁腳 -->
      <footer>footer</footer>
    </div>
</template>

<script>
import People from "./components/people";
import SideSection from "./components/aside";

export default {
  components: {
    People,
    SideSection
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
header {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  background: #192847;
}
footer {
  font-size: 30px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #151923;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrapper {
  display: flex;
  flex: 1;
}
</style>

　　aside.vue 代碼如下

<template>
  <div class="aside">
    aside
  </div>
</template>
<style scoped>
  .aside {
    width: 200px;
    height: 600px;
    background-color: #152b59;
  }
</style>

　　people 代碼如下

<template>
  <div class="relation-people">
    dddd
  </div>
</template>

<style scoped>
.relation-people {
  background: red;
  height: 300px;
　flex：1；
}
</style>

　　整個項目啟動運行就是如下結果

　　肯定是flex 布局失效了，那就是wrapper類的樣式設計有問題。再看一下wrapper類，基本確定是min-height 的問題。查了一下flex min-height，找到原因，是min-height 屬性在flex 容器上是無效的，同時也找到了一種解決方式是把min-height的flex 容器，再包含到一個flex 容器中。那我們就把所有的html代碼包含到一個div 元素中，然后讓這個元素flex 布局

  <div class="app">
    <div class="wrapper">
      <!-- 頁眉 -->
      <header>Header</header>
      <!-- 中間內容 -->
      <section class="content-wrapper">
        <side-section></side-section>
        <people class="article"/>
      </section>
      <!-- 頁腳 -->
      <footer>footer</footer>
    </div>

  </div>

　　然后的style 中增加.app 中，display：flex;

.app {
  display: flex;
}

　　頁腳是是在下面了，但整個頁面縮短了。

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%; /* 增加寬度100% */
}

　　在IE11 下，有的元素設置flex布局后，它的寬度有時會變短，需要增加width: 100% 屬性，我也不知道什么原因。這時滾動鼠標向下拉，又發現了一個問題，頁腳只是位於當前窗口的下面，而不是在整個內容的下面，

　　看一下content-wrapper的樣式，應該是flex: 1的問題，在ie11 下 flex: 1 解析為1 1 0, 而不是其他瀏覽器的1 1 auto, 所以這時還要對flex: 1進行修改，使用flex-grow: 1

.content-wrapper {
  display: flex;
  flex-grow: 1; /* flex:1 改變成flex-grow: 1 */
}

　　終於沒有問題了