Défilement d'un flexbox à débordement de contenu
Voici le code Je suis pour atteindre la disposition ci-dessus:
CSS:
.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;
}HTML:
<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>J'ai omis le code utilisé pour le style. Vous pouvez voir tout cela dans le pen.
Les travaux ci-dessus, mais quand le content de la zone de contenu déborde, il rend le défilement des pages. Je veux seulement le contenu de la zone elle-même pour faire défiler, de sorte J'ai ajouté overflow: auto à content div.
Le problème maintenant est que les colonnes elles-mêmes ne s'étendent pas au-delà de leurs parents hauteur, de sorte que les frontières sont coupés de la là aussi.
Voici le pen montrant le défilement de la question.
Comment puis-je régler le content de la zone de défilement de façon indépendante, tout en ayant ses enfants s'étendre au-delà de la content de la boîte de hauteur?
Vous devez vous connecter pour publier un commentaire.
J'en ai parlé à Onglet Atkins (auteur de la flexbox spec) à ce sujet, et c'est ce que nous sommes arrivés avec:
HTML:
CSS:
Voici les stylos:
La raison pour laquelle cela fonctionne est parce que
align-items: stretchne recule pas devant ses éléments s'ils ont une valeur intrinsèque de la hauteur, ce qui est accompli ici parmin-content.flex-flow: row wrap;sur le conteneur +flex: 1 100%;sur l'élément à débordement (voir ici). C'est dommage, j'aurai besoin de re-design HTML.Je viens de résoudre ce problème, très élégant, après beaucoup d'essais et d'erreurs.
Check out my blog post: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
En gros, pour faire un flexbox cellule de défilement, vous avez à faire tous ses parents
overflow: hidden;, ou il sera simplement ignorer votre dépassement de paramètres et de rendre les parents plus grande la place.De travail avec
position:absolute;avecflex:Position de la flexion de l'élément avec
position: relative. Puis à l'intérieur, ajouter un autre<div>élément avec:Cela s'étend de l'élément pour les limites de sa relative placé parent, mais ne permet pas de le prolonger. À l'intérieur,
overflow: auto;va alors fonctionner comme prévu.CSS:
HTML:
Bonne Chance...
box-sizing: border-boxà la place, mais qui peut être plus complexe pour certains contrôles tiers).Un peu de retard, mais cela pourrait aider:
http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
Fondamentalement, vous avez besoin de mettre
html,bodyàheight: 100%;et de l'emballage de tous vos contenus en un<div class="wrap"> <!-- content --> </div>CSS:
A fonctionné pour moi. Espérons que cela aide
Ajouter ceci:
à la règle pour
.content {}. Qu'il fixe dans votre stylet pour moi, au moins (dans les deux Firefox & Chrome).Par défaut,
.contentaalign-items: stretch, ce qui en fait la taille de l'ensemble de ses auto-hauteur des enfants pour correspondre à sa propre hauteur, par http://dev.w3.org/csswg/css-flexbox/#algo-stretch. En revanche, la valeurflex-startpermettant aux enfants de calculer leur propre hauteurs, et s'aligner au départ du bord (et de débordement, et de déclencher une barre de défilement).