html,
body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 1;
height: 60px;
background: lightblue;
padding: 0;
margin: 0;
}
header p {
text-align: center;
}
.main-wrap {
display: flex;
flex: 1 1 auto;
width: 1000px;
background: lightgreen;
margin: 0 auto;
height: 100%;
}
.right-pane {
display: inline-flex;
flex: 1 1 auto;
flex-direction: column;
background: #76DAFF;
}
.right-head {
text-align: center;
height: 40px;
flex: 1;
background-color: #DDCA7E;
}
.right-body {
background-color: #B9F;
display: inline-flex;
flex: 1 1 auto;
overflow-y: auto;
}<html>
<body>
<header>
<p>I am a fixed header</p>
</header>
<div class="main-wrap">
<div class="right-pane">
<div class="right-head">
<p>I am a fixed container</p>
</div>
<div class="right-body">
<ul>
<li>Scroll me I am famous!</li>
<li>Scroll me I am famous!</li>
<li>Scroll me I am famous!</li>
</ul>
</div>
</div>
</div>
</body>
</html>This code snippet performs well in Safari9 and Chrome, but it fails on Firefox. My goal is to hide the main scrollbar on the page.
It seems like the "height: 100%" property includes the first header's height.