オーバーフローしたネストされたフレックスボックスのFirefoxのバグ

Question

このリンクを開くと、ほとんどの場合、フレックスボックスで「複雑な」レイアウトが作成されます。http://jsbin.com/miyuwuyepu/1/edit?html,css,output 完全に下にスクロールすると、Chromeでは正しく動作しますが、Firefoxでは正しく表示されます。バーが表示されなくなります（ページ全体がスクロールします）。

Firefoxのこの動作はバグですか？回避策はありますか？それは正しい行動ですか、私は何かを逃しているか、何かをしてはいけないのですか？

html, 
 
body, 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 10px; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 3rem; 
 
    flex-shrink: 0; 
 
} 
 

 
.content { 
 
    background-color: aqua; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-top: 0.1rem; 
 
    display: flex; 
 
    padding: 0; 
 
} 
 

 
.side-bar { 
 
    background-color: green; 
 
    height: 100%; 
 
    width: 5rem; 
 
    flex-shrink: 0; 
 
} 
 

 
.boxes { 
 
    overflow: auto; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.box { 
 
    height: 8rem; 
 
    width: 8rem; 
 
    background-color: red; 
 
    margin: 1rem; 
 
    flex-shrink: 0; 
 
}

<div class="container"> 
 
    <div class="header"></div> 
 
    <div class="content"> 
 
    <div class="side-bar"></div> 
 
    <div class="boxes"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

私はこの問題を再現することができます。

.header { 
    background-color: yellow; 
    width: 100%; 
    height: 3rem; 
    flex-shrink: 0; 
    position: fixed; 
}