Intégration de flexbox et de défilement vertical dans une mise en page à pleine hauteur

lorsque vous travaillez avec des applications pleine hauteur, la combinaison de flexibles et une barre de défilement verticale peut être une exigence commune. Cependant, il peut poser des défis en raison de la nature interactive des dispositions de Flexbox.

Approche traditionnelle de flexbox (anciennes propriétés)

Flexbox Misseouts en utilisant l'ancienne syntaxe (affichage: box) permettent des applications complètes avec une grève verticale dans certains rumeurs. Cette solution repose sur le réglage de la direction flexible sur la colonne et l'utilisation de débordement-y: auto sur l'élément parent.

Problèmes avec l'utilisation de propriétés Flexbox plus récentes

Essayer des propriétés plus récentes de flexbox avec une conception pleine hauteur et de la conception introduit des limites. La solution de contournement en utilisant la hauteur: 0px; Sur un élément wrapper n'est pas fiable et crée des problèmes supplémentaires.

Solution: réglage de la hauteur pour l'élément de défilement vertical

Une solution robuste implique de définir une hauteur spécifique pour l'élément où le défilement vertical est souhaité. Cela permet à l'algorithme Flexbox de calculer la hauteur appropriée et de rendre la barre de défilement selon les besoins. Par exemple, en utilisant les CSS suivants:

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

déterminant la hauteur minimale

Si une hauteur minimale est requise, remplacez la hauteur: 0px; avec min-height: valeur souhaitée; Pour s'assurer que l'élément affiche une barre de défilement même lorsque son contenu ne dépasse pas le minimum spécifié.

Exemple final

En résumé, la solution la plus efficace pour combiner Flexbox et le défilement vertical dans un élément de frappe complet. Cela permet un rendu optimal et un comportement de barre de défilement, résultant en une expérience utilisateur sans couture.