flex + overflow problem in firefox and the edge is not in force

Code link that is no problem in the chrome, but in firefox and edge, there will be highly compressed header, and not 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 and lower edge and the chrome portions:

The latest chrome under ok:

Solution:

Header set to a min-height: 60px

See more about this on stackoverflow answer to the question

Reproduced in: https: //juejin.im/post/5d09eeccf265da1b855c5a5d