¿Cómo aplicar una barra de desplazamiento a una sección dentro de un flexbox?
Considere lo siguiente:
- {padding: 0; margin: 0; }
body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 50px;
background-color: lightgray;
}
div#wrapper {
flex: 1 0 0px;
display: flex;
flex-direction: row;
}
aside {
background-color: darkgray;
flex: 0 0 50px;
}
main {
display: block;
flex: 1 1 0px;
background-color: aliceblue;
}
div#content {
width: 60px;
height: 2000px;
margin: 10px;
background-color: red;
}
div#content-wrap {
width: 100%;
height: 100%;
}
div#content-container {
height: 100%;
overflow-y: scroll;
}
En el fragmento anterior, el <body>
ocupa todo el espacio disponible, consta de un elemento <header>
que toma una altura arbitraria y un <div id="wrapper">
que ocupa el resto de la altura disponible. El mencionado “#wrapper
” tiene una barra lateral de ancho arbitrario y una sección principal “<main>
” que ocupa el resto del ancho. Deseo que sólo la sección “main” sea desplazable, pero aplicar un “#content
” lo suficientemente largo hace que el cuerpo tenga la barra de desplazamiento. (aunque he fijado las alturas en 100%
) Entonces, ¿cómo solucionarlo?
davy.ai
Para solucionar este problema, necesitamos hacer dos cambios:
html
ybody
en100%
, para que el elementobody
ocupe todo el espacio disponible dentro del elementohtml
.Debemos establecer la altura del elemento
#wrapper
encalc(100% - 50px)
para que ocupe toda la altura disponible menos la altura del elementoheader
.Aquí está el código CSS actualizado:
Con estos cambios, solo la sección
main
tendrá una barra de desplazamiento y el elementobody
no la tendrá.