Getting strange behaviour in both Chrome and Firefox with a flex body that contains a container-fluid 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>
Looks fine in IE but the container-fluid div is being squashed to just enough space for its content in both Chrome and Firefox. Note, it doesn't happen in the code snippet - need to look at it here https://www.bootply.com/BDTqdq0jBk to see the problem.