フレックスボディのブートストラップコンテナ流体ChromeとFirefox

Question

ChromeとFirefoxの両方で、コンテナ流体divを含むフレックスボディで奇妙な動作をする。

html, body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.body-content { 
 
    display: flex; 
 
    flex-flow: column; 
 
    flex: 1 1 auto; 
 
    background: yellow; 
 
} 
 

 
.footer {  
 
    background: #930D25; 
 
    color: #fff; 
 
    text-align: center; 
 
    height: 45px; 
 
    font-family: segoe ui,Arial,sans-serif; 
 
    flex: 0 0 auto; 
 
    z-index:3; 
 
}

<header class="navbar navbar-inverse">Header stuff</header> 
 
<div class="container-fluid body-content"> 
 
    <h2>Stuff</h2> 
 
    <div class="row"> 
 
     <div class="col-md-8"> 
 
      Garbage 
 
     </div> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <div> 
 
     <p>our cool site</p> 
 
    </div> 
 
</footer>

IEで正常に見えるが、容器流体のdivがChromeとFirefoxの両方でそのコンテンツのためだけの十分なスペースに押しつぶされています。 注：コードスニペットでは発生しません。この問題を確認するには、https://www.bootply.com/BDTqdq0jBkこちらをご覧ください。私は身体{表示：フレックス}削除

Answer 1

問題を解決するために、私はクロームにスクロールバーが表示されていなかったことにより、同じ問題を持って