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 estilo. Puedes verlo todo en la pluma .
Lo anterior funciona, pero cuando el contentcontenido del área se desborda, hace que toda la página se desplace. Solo quiero que el área de contenido se desplace, así que 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á la pluma que muestra el problema de desplazamiento .
¿Cómo puedo configurar el contentárea para que se desplace de forma independiente, mientras que sus hijos se extiendan más allá contentde la altura de la caja?
css
layout
multiple-columns
flexbox
Joseph Silber
fuente
fuente
Acabo de resolver este problema con mucha elegancia después de muchas pruebas y errores.
Echa un vistazo a mi publicación de blog: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Básicamente, para hacer que una celda flexbox se pueda desplazar, debe hacer que todos sus padres
overflow: hidden;, o simplemente ignorará su configuración de desbordamiento y hará que el padre sea más grande.fuente
Trabajando
position:absolute;junto conflex:Coloque el elemento flexible con
position: relative. Luego, dentro de él, agregue otro<div>elemento con:Esto extiende el elemento a los límites de su padre en posición relativa, pero no permite extenderlo. En el interior,
overflow: auto;funcionará como se esperaba.Buena suerte...
fuente
box-sizing: border-boxpero eso puede ser más complejo para ciertos controles de terceros).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 hay que poner
html,bodyaheight: 100%;y envolver todo su contenido en una<div class="wrap"> <!-- content --> </div>CSS:
Trabajó para mi. Espero eso ayude
fuente
Agrega esto:
a la regla para
.content {}. Eso lo arregla en tu pluma para mí, al menos (tanto en Firefox como en Chrome).Por defecto,
.contenthasalign-items: stretch, lo que hace que dimensione todos sus hijos de altura automática para que coincidan con su propia altura, según http://dev.w3.org/csswg/css-flexbox/#algo-stretch . Por el contrario, el valorflex-startpermite a los niños calcular sus propias alturas y alinearse en su borde inicial (y desbordarse, y activar una barra de desplazamiento).fuente
Un problema que he encontrado es que para tener una barra de desplazamiento, un elemento necesita una altura que se especifique (y no como un%).
El truco consiste en anidar otro conjunto de divisiones dentro de cada columna y configurar la pantalla del padre de la columna para que se flexione con la dirección de flexión: columna.
Y aquí está el html:
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
fuente
La solución para este problema es simplemente agregar
overflow: auto;al contenido para hacer que el contenedor de contenido se pueda desplazar.Además, hay circunstancias que ocurren junto con el contenedor Flexbox y el
overflowedcontenido desplazable como este codepen .La solución es agregar
overflow: hidden (or auto);al padre del contenedor (configurado con overflow: auto;) alrededor de contenidos grandes.fuente