Please take a look at this pen:
https://codepen.io/linck5/pen/gRKJbY?editors=1100
body{ margin: 0;}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
background-color: darksalmon;
height: 50px;
}
.inner-container {
flex: 1;
background-color: chocolate;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
background-color: blueviolet;
flex: 1;
overflow: auto;
font-size: 40px;
line-height: 5rem;
}
.bottom {
background-color: darkkhaki;
height: 200px;
}<div class="container">
<div class="top-bar">Top bar</div>
<div class="inner-container">
<div class="top">
O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
</div>
<div class="bottom">Bottom part</div>
</div>
</div>I want to have only the .top div be scrollable, not the entire page. I don't want the .top div to push down the .bottom div.
And this is exactly what happens on Chrome, everything works perfectly. But on Firefox and Edge, a scrollbar appears on the entire page, and the .bottom div is pushed down.
Also the .top-bar div gets shrunk down instead of having its desired 50px height.
Could you guys help me with this?