Flexbox et défilement vertical dans une application pleine hauteur utilisant NEWER flexbox api

Je veux utiliser une application pleine hauteur en utilisant Flexbox. J’ai trouvé ce que je voulais en utilisant l’ancien flexbox (display: box; et d’autres choses) sur ce lien: Application pleine hauteur CSS3 Flexbox et débordement

Ceci est une solution correcte pour l’ancienne version des propriétés css de Flexbox.

Si je veux essayer d’utiliser les propriétés flexbox les plus récentes, j’essaierai d’utiliser la deuxième solution dans le même lien, mais la flexbox “hacking” en utilisant un conteneur avec la hauteur: 0px; Il fait apparaître un défilement vertical.

Je n’aime pas trop ça car cela introduit d’autres problèmes et c’est plus une solution de travail que de 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; } 

C’est un “web html pleine hauteur” et le pied de page est en bas à cause de la flexibilité de l’élément de contenu. Je vous suggère de déplacer la barre entre le code CSS et le résultat pour simuler une hauteur différente.

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

La solution consiste à définir une hauteur pour l’élément déroulant vertical. Par exemple:

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

L’élément aura la hauteur car flexbox le recalcule à moins que vous ne souhaitiez une hauteur minimale pour que vous puissiez utiliser height: 100px; que c’est exactement comme: 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 une min-hauteur dans le défilement vertical:

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

Si vous voulez juste un défilement vertical complet au cas où il n’y aurait 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/

Editeur de spécifications Flexbox ici.

Ceci est une utilisation encouragée de flexbox, mais il y a quelques choses que vous devriez modifier pour un meilleur comportement.

  • N’utilisez pas de préfixes. La flexbox non préfixée est bien prise en charge dans la plupart des navigateurs. Commencez toujours par unprefixed, et ajoutez uniquement des préfixes si nécessaire pour le supporter.

  • Étant donné que votre en-tête et votre pied de page ne sont pas conçus pour être flexibles, ils doivent tous les deux être flex: none; mis sur eux. En ce moment, vous avez un comportement similaire en raison de certains effets qui se chevauchent, mais vous ne devriez pas compter sur cela à moins que vous ne vouliez vous confondre plus tard. (La valeur par défaut est flex:0 1 auto ; ils démarrent donc à leur hauteur automatique et peuvent se réduire, mais ne se développent pas, mais ils sont également overflow:visible par défaut, ce qui déclenche leur min-height:auto par défaut min-height:auto Si vous définissez un overflow , le comportement de min-height:auto change (basculement sur zéro plutôt que min-content) et ils seront soudainement écrasés par l’élément

    extra-haut.)

  • Vous pouvez aussi simplifier le

    flex – définissez simplement flex: 1; et vous serez prêt à partir. Essayez de vous en tenir aux valeurs courantes dans https://drafts.csswg.org/css-flexbox/#flex-common, sauf si vous avez une bonne raison de faire quelque chose de plus compliqué: elles sont plus faciles à lire et couvrent la plupart des comportements. vous voudrez invoquer.

La spécification actuelle dit ceci en ce qui concerne le flex: 1 1 auto :

Dimensionne l’article en fonction des propriétés de width / height , mais les rend totalement flexibles, de sorte qu’elles absorbent tout espace libre le long de l’axe principal. Si tous les éléments sont flex: auto , flex: initial ou flex: none , tout espace libre après la taille des éléments sera dissortingbué uniformément aux éléments avec flex: auto .

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

Il me semble que si vous dites qu’un élément mesure 100px, il est traité plus comme une taille “suggérée”, pas comme un absolu. Comme il est autorisé à rétrécir et à croître, il prend autant de place que possible. C’est pourquoi l’ajout de cette ligne à votre élément “main” fonctionne: height: 0 (ou tout autre nombre plus petit).