Desplazamiento de un flexbox con contenido desbordante

enter image description here

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; } 
 
Main header
Column 1
Column 1
Column 1

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 ?

He hablado con Tab Atkins (autor de la especificación flexbox) sobre esto, y esto es lo que se nos ocurrió:

HTML:

 
Column 1
Column 1
Column 1

CSS:

 .content { flex: 1; display: flex; overflow: auto; } .box { min-height: min-content; /* needs vendor prefixes */ display: flex; } 

Aquí están los bolígrafos:

  1. Columnas cortas que se estiran .
  2. Columnas más largas desbordadas y desplazándose .

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 .

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.

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

CSS:

 html, body { height: 100%; } .wrap { height: 100vh; display: flex; } 

Trabajó para mi. Espero eso ayude

Trabajando con position:absolute; junto con flex :

  • Haga clic aquí para ver el CODEPEN
  • El resultado: enter image description here

Buena suerte…

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 estirar . 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).