css - entre - flexbox generator
Desplazamiento de un flexbox con contenido desbordante (5)
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 el diseño. Puedes ver todo en el corral .
Lo anterior funciona, pero cuando el content área de contenido se desborda, hace que toda la página se desplace. Solo quiero que el área de contenido se desplace, así que agregué overflow: auto al content div .
El problema con esto ahora es que las columnas mismas 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 bolígrafo que muestra el problema del desplazamiento .
¿Cómo puedo configurar el área de content para que se desplace de forma independiente, mientras que los elementos secundarios se extienden más allá de la altura del cuadro de content ?
Acabo de resolver este problema muy elegantemente después de mucho ensayo y error.
Echa un vistazo a 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, debes hacer que todos sus padres se overflow: hidden; , o simplemente ignorará su configuración de desbordamiento y hará que el elemento primario sea más grande en su lugar.
Agrega esto:
align-items: flex-start;
a la regla para .content {}. Eso lo arregla en tu pluma para mí, al menos (tanto en Firefox como en Chrome).
De forma predeterminada, .content tiene "align-items: stretch", lo que le da tamaño a todos sus hijos de altura automática para que coincida con su altura, por http://dev.w3.org/csswg/css-flexbox/#algo-stretch . Por el contrario, el valor "inicio flexible" permite que los niños calculen sus propias alturas y se alineen en su borde de inicio (y desborde, y activen una barra de desplazamiento).
He hablado con Tab Atkins (autor de la especificación flexbox) sobre esto, y esto es lo que se nos ocurrió:
HTML:
<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
CSS:
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: min-content; /* needs vendor prefixes */
display: flex;
}
Aquí están los bolígrafos:
La razón por la que esto funciona es porque align-items: stretch no reduce sus elementos si tienen una altura intrínseca, lo que se logra aquí mediante min-content .
Un poco tarde pero esto podría ayudar: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
Básicamente, necesitas poner html , body to height: 100%; y envuelva todo su contenido en un <div class="wrap"> <!-- content --> </div>
CSS:
html, body {
height: 100%;
}
.wrap {
height: 100vh;
display: flex;
}
Trabajó para mi. Espero eso ayude