Desplazando un flexbox con contenido desbordado
Aquí está el código que estoy usando para lograr el diseño anterior:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>Omití el código utilizado para diseñar. Puedes verlo todo en el bolígrafo .
Lo anterior funciona, pero cuando el contentcontenido del área se desborda, hace que toda la página se desplace. Solo quiero que se desplace el área de contenido, así que lo agregué overflow: autoal contentdiv .
El problema con esto ahora es que las columnas en sí no se extienden más allá de la altura de sus padres, por lo que los bordes también se cortan allí.
Aquí está el lápiz que muestra el problema de desplazamiento .
¿Cómo puedo configurar el contentárea para que se desplace de forma independiente y al mismo tiempo hacer que sus elementos secundarios se extiendan más allá de la contentaltura del cuadro?
Hablé con Tab Atkins (autor de la especificación de flexbox) sobre esto, y esto es lo que se nos ocurrió:
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
display: flex;
min-height: min-content; /* needs vendor prefixes */
}<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>Aquí están los bolígrafos:
- Columnas cortas que se estiran .
- Columnas más largas que se desbordan y se desplazan .
La razón por la que esto funciona es porque align-items: stretchno reduce los elementos si tienen una altura intrínseca, lo que se logra aquí mediante min-content.
Resolví este problema de manera muy elegante después de muchas pruebas y errores.
Consulte la publicación de mi blog: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Básicamente, para hacer que una celda de flexbox sea desplazable, debe hacer que todos sus padres overflow: hidden; , o simplemente ignorará la configuración de desbordamiento y hará que el padre sea más grande.
