Comment puis-je implémenter le défilement vertical dans une application Flexbox pleine hauteur ?

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

Flexbox fournit un mécanisme puissant pour créer des mises en page flexibles. Cependant, lorsqu'il est utilisé conjointement avec une application pleine hauteur, réaliser un défilement vertical peut être un défi.

Solutions précédentes

Approches précédentes, telles que l'utilisation des anciennes propriétés flexbox (par exemple, display : box), se sont révélés efficaces pour les navigateurs prenant en charge la syntaxe flexbox existante. Cependant, pour les navigateurs modernes utilisant les propriétés flexbox les plus récentes, des solutions de contournement telles que la définition de height: 0px sur le conteneur ont été utilisées, mais peuvent introduire des effets secondaires indésirables.

Solution optimale

La solution optimale implique de définir une hauteur par rapport à l'élément à défilement vertical dans la disposition flexbox. En spécifiant une hauteur (ou une hauteur minimale), la flexbox recalcule la hauteur de l'élément, lui permettant de croître selon les besoins pour s'adapter au contenu tout en appliquant le défilement vertical si nécessaire.

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

Avantages

Cette solution :

• Offre une flexibilité à la fois horizontale et verticale au sein de la flexbox mise en page.
• Assure un défilement vertical uniquement en cas de besoin, sans avoir besoin de solutions de contournement supplémentaires.
• Est entièrement compatible avec les navigateurs modernes et les futures normes CSS.

Démo

Une version améliorée du JSFiddle fourni démontre la solution optimale en action : http://jsfiddle.net/ch7n6/867/.

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!