El elemento Flexbox con contenido desbordado solo funciona en Chrome
Por favor, eche un vistazo a esta pluma:
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>
Quiero tener solo el.top
div se puede desplazar, no toda la página. No quiero el.top
div para empujar hacia abajo.bottom
div.
Y esto es exactamente lo que sucede en Chrome, todo funciona perfectamente. Pero en Firefox y Edge, aparece una barra de desplazamiento en toda la página, y el.bottom
div es empujado hacia abajo.
También el.top-bar
div se reduce en lugar de tener la altura deseada de 50 px.
¿Podrían ayudarme con esto?