Étirer l'enfant flex Flexbox.

Pourquoi utiliser "Height: 100%" peut casser Flexbox

lors de l'utilisation de "High: 100%" dans Flexbox:

Le parent de l'élément étiré nécessite une hauteur déclarée, qui va à l'encontre du comportement par défaut. "Hauteur: 100%" ignorera leur présence et mènera à des conflits.

La solution: supprimer "Hauteur: 100%"

élément.

explication

Dans Flexbox avec la direction de la ligne (la valeur par défaut), la propriété "Align-Items" contrôle le comportement vertical. Son paramètre par défaut est "Stretch", ce qui fait que les éléments flexibles s'étirent automatiquement pour remplir la hauteur disponible, à condition que le parent n'a pas de jeu de hauteur explicite.

Exemple de code

Considérez le code d'extinction suivant: