Comment activer le défilement vertical dans une application Flexbox pleine hauteur ?

Combinaison de Flexbox et de défilement vertical dans des applications pleine hauteur

Problème :

Création d'une mise en page d'application pleine hauteur à l'aide flexbox tout en permettant la verticale défilement.

Discussion :

En utilisant les dernières propriétés de flexbox, une mise en page d'application avec toute la hauteur peut être obtenue. Cependant, l'ajout d'un défilement vertical peut s'avérer difficile.

L'approche initiale utilisant une disposition flexbox obsolète (par exemple, display: box) est viable pour les navigateurs prenant en charge uniquement cette ancienne version.

Pour contourner ce problème problème, un hack a été proposé, qui consiste à définir la hauteur du conteneur à 0px. Bien que cette solution de contournement résolve le problème de défilement, elle crée de nouveaux problèmes.

Solution :

La solution idéale consiste à définir une hauteur pour l'élément défilant dans la disposition flexbox. Par défaut, flexbox calcule la hauteur de ses éléments, donc une hauteur de 0px permettra effectivement le défilement vertical.

Si une hauteur minimale est souhaitée, min-height peut être utilisée à la place, par exemple min-height : 100px .

Exemple de code :

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

Cette approche garantit que le L'élément déroulant a une hauteur tout en permettant à flexbox de la recalculer dynamiquement.

Fiddle mis à jour :

[JSFiddle mis à jour](http://jsfiddle.net/ch7n6/867 /) démontre la solution finale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!