Firefoxとエッジにおけるフレックス+オーバーフローの問題は、力ではありません

コードリンククロムに問題ありませんが、Firefoxとエッジで、高度に圧縮されたヘッダが存在することになる、としない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と下縁とクロムの部分：

[OK]の下で、最新のクロム：

ソリューション：

分の高さに設定ヘッダー：60PX

stackoverflowの上でこれについての詳細を参照してください質問への答え

ます。https：//juejin.im/post/5d09eeccf265da1b855c5a5dで再現