flex +overflow在firefox与edge中不生效的问题

代码链接 这在chrome中没问题，但是在firefox和edge中，会出现header高度被压缩，并没有100px

<div class="container">
  <header>头部</header>
  <footer>
    <div class="left">left</div>
    <div class="right">尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />
    尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />  尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />尾部<br />
    <br />尾部<br />尾部<br />尾部<br />尾部<br /></div>
  </footer>
</div>

css:

.container{
  display:flex;
  flex-direction: column;
  height: 400px;
}
header{
  width: 100%;
  height: 100px;
  background:#f0f;
}
footer{
  display: flex;
  flex: 1;
  background: #0f0;
/* 这行代码是关键   */
/*   min-height: 0 */
}
.left{
  width:200px;
  border: 1px solid #f00;
}
.right{
  flex: 1;
  overflow: auto;
}

firefox和edge以及部分chrome下：

解决方法：

给header设置一个min-height:60px

详见stackoverflow上关于这个问题的答案