IE，flex布局问题？

Question

<div class="box">
    <div class="top">top</div>
    <div class="mid">mid</div>
    <div class="btm">btm</div>
  </div>

css

.box{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .mid{
      flex: 1;
      background-color: #ffc;
    }

效果如下图

但是去了IE浏览器，中间的黄色的高度就变成了0？为什么？应该怎么改？才能让中间这个部分在内容超出时自动增加高度，内容不够时，沾满一屏（加上头和脚）

Answer 1

你需要的是 sticky-footer 布局吧，想要兼容可以换一种写法啊 参考这里