Faire défiler un flexbox avec un contenu débordant

entrer la description de l'image ici

Voici le code que j’utilise pour réaliser la mise en page ci-dessus:

.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

J’ai omis le code utilisé pour le style. Vous pouvez voir tout cela dans le stylo .


Cela fonctionne, mais lorsque le content zone de contenu déborde, cela fait défiler la page entière. Je veux seulement que la zone de contenu elle-même défile, donc j’ai ajouté un overflow: auto au content div .

Le problème avec ceci est que les colonnes elles-mêmes ne dépassent pas la taille de leurs parents, donc les bordures sont coupées là aussi.

Voici le stylo montrant le problème de défilement .

Comment puis-je définir la zone de content pour faire défiler indépendamment, tout en ayant ses enfants s’étendent au-delà de la hauteur de la zone de content ?

    J’ai parlé à Tab Atkins (auteur de la spécification Flexbox) à ce sujet, et c’est ce que nous avons proposé:

    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; } 

    Voici les stylos:

    1. Les colonnes courtes sont étirées .
    2. Des colonnes plus longues débordent et défilent .

    La raison pour laquelle cela fonctionne est que align-items: stretch ne réduit pas ses éléments s’ils ont une hauteur insortingnsèque, ce qui est accompli ici par min-content .

    Je viens de résoudre ce problème très élégamment après beaucoup d’essais et d’erreurs.

    Consultez mon article de blog: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

    Fondamentalement, pour faire défiler une cellule Flexbox, vous devez faire overflow: hidden; tous ses parents overflow: hidden; , ou simplement ignorer vos parameters de débordement et agrandir le parent à la place.

    Un peu tard mais cela pourrait aider: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox–cms-23269

    Fondamentalement, vous devez mettre html , body à height: 100%; et envelopper tout votre contenu dans un

    CSS:

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

    Travaillé pour moi J’espère que cela aide

    Travailler avec la position:absolute; avec flex :

    • Cliquez ici pour le CODEPEN
    • Le résultat: entrer la description de l'image ici

    Bonne chance…

    Ajoute ça:

     align-items: flex-start; 

    à la règle pour .content {}. Cela corrige le problème dans votre stylo, du moins pour Firefox et Chrome.

    Par défaut, .content a “align-items: stretch”, ce qui lui permet de dimensionner tous ses enfants auto-height pour correspondre à sa propre hauteur, selon http://dev.w3.org/csswg/css-flexbox/#algo -stretch . En revanche, la valeur “flex-start” permet aux enfants de calculer leurs propres hauteurs, de s’aligner sur leur bord de départ (et de déborder, et de déclencher une barre de défilement).