플렉스 바디가있는 부트 스트랩 컨테이너 - 유체 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에서 잘 보이는하지만 컨테이너 유체 사업부는 크롬과 파이어 폭스 모두에서 그 내용에 대한 충분한 공간을 숙청되고있다. 코드 스 니펫에서는 발생하지 않으므로 여기를 참조하십시오. https://www.bootply.com/BDTqdq0jBk 문제를 확인하십시오. 내가 몸 {디스플레이 : 플렉스} 제거

Answer 1

문제를 해결하기를, 나는 크롬에 스크롤 막대가 표시되지 않은함으로써 동일한 문제를 가지고