Flexbox et vertical scroll dans une application pleine hauteur utilisant une nouvelle api flexbox

je veux utiliser une application pleine hauteur en utilisant flexbox. J'ai trouvé ce que je veux en utilisant l'ancienne flexbox (display: box; et d'autres choses) dans ce lien: CSS3 Flexbox pleine hauteur app et débordement

il s'agit d'une solution correcte pour l'ancienne version des propriétés CSS de flexbox.

si je veux essayer d'utiliser les nouvelles propriétés flexbox je vais essayer d'utiliser la deuxième solution dans le même lien mais "hacking" flexbox en utilisant un conteneur avec hauteur: 0px; il fait pour montrer un rouleau vertical.

Je ne l'aime pas beaucoup parce qu'il introduit d'autres problèmes et il est plus un workarround qu'une solution.

j'ai préparé un jsfiddle avec un exemple de base: http://jsfiddle.net/ch7n6 / 

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

il s'agit d'un" full-height html web " et le pied de page sont en bas à cause de la flexbox de le contenu de l'élément. Je vous suggère de déplacer la barre entre le code css et le résultat pour simuler une hauteur différente.

58
demandé sur Community 2013-02-19 20:28:35

3 réponses

merci à https://stackoverflow.com/users/1652962/cimmanon qui m'a donné la réponse.

la solution fixe une hauteur à l'élément réglable verticalement. Par exemple: 

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

l'élément aura la hauteur parce que flexbox recalcule à moins que vous ne vouliez une min-height donc vous pouvez utiliser hauteur: 100px; qu'il est exactement identique à: min-height: 100px; 

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

donc la meilleure solution si vous voulez un min-height dans le rouleau vertical: 

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Si vous voulez juste plein de défilement verticale dans le cas où il n'y a pas assez d'espace pour voir l'article: 

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

le code final: http://jsfiddle.net/ch7n6/867 /

122
répondu José Cabo 2017-05-23 11:55:19

éditeur de spécifications Flexbox ici.

c'est une utilisation encouragée de flexbox, mais il ya quelques choses que vous devriez Modifier pour le meilleur comportement.

  • N'utilisez pas de préfixes. Flexbox non figé est bien supporté par la plupart des navigateurs. Commencez toujours avec unprefixed, et n'ajoutez des préfixes que si nécessaire pour le supporter.

  • puisque votre en-tête et le pied de page ne sont pas destinés à fléchir, ils devraient tous les deux ont flex: none; . En ce moment, vous avez un comportement similaire en raison de certains effets se chevauchant, mais vous ne devriez pas compter sur ce sauf si vous voulez accidentellement vous confondre plus tard. (Par défaut est flex:0 1 auto , de sorte qu'ils commencent à leur hauteur automatique et peuvent rétrécir mais ne pas croître, mais ils sont aussi overflow:visible par défaut, qui déclenche leur défaut min-height:auto pour les empêcher de rétrécir du tout. Si jamais vous mettez un overflow sur eux, le comportement de min-height:auto les changements (passer à zéro plutôt qu'à min-content) et ils vont soudainement être écrasés par l'élément extra-haut <article> .)

  • vous pouvez simplifier le <article> flex trop - juste mis flex: 1; et vous serez bon à aller. Essayez de vous en tenir aux valeurs communes de https://drafts.csswg.org/css-flexbox/#flex-common sauf si vous avez une bonne raison de faire quelque chose de plus compliqué - ils sont plus faciles à lire et couvrez la plupart des comportements que vous voulez invoquer.

43
répondu Xanthir 2015-12-18 19:31:59

la spécification actuelle dit ceci au sujet de flex: 1 1 auto :

tailles l'article basé sur les propriétés width / height , mais fait ils sont entièrement flexibles, de sorte qu'ils absorbent tout espace libre le long de la axe. Si tous les articles sont flex: auto , flex: initial , ou flex: none , tout espace libre positif après que les articles ont été dimensionnés sera distribué également aux articles avec flex: auto .

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

il me semble que si vous dites un élément est de 100px de haut, il est traité plus comme une taille" suggéré", pas un absolu. Parce qu'il est permis de rétrécir et de croître, il prend autant d'espace que son permis. C'est pourquoi ajouter cette ligne à votre élément "principal" fonctionne: height: 0 (ou tout autre petit nombre).

17
répondu cimmanon 2013-02-19 18:50:18