Pourquoi le pourcentage de hauteur ne fonctionne-t-il pas comme prévu dans les colonnes Flexbox ?

Problèmes de hauteur en pourcentage dans les colonnes Flexbox

Dans les mises en page flexbox, il est souvent souhaité que les enfants d'une colonne flexbox remplissent leur hauteur. Cependant, les utilisateurs peuvent rencontrer des problèmes où la définition de la hauteur en pourcentages ne donne pas le résultat attendu.

Explication

Selon la spécification flexbox, la propriété cross-size d'un élément (hauteur, dans ce cas) utilise une valeur spécifiée et une valeur utilisée. Les hauteurs en pourcentage sont calculées en fonction de la taille spécifiée du parent, et non de la hauteur utilisée.

Solution

Pour résoudre ce problème dans Chrome :

1. Définissez le conteneur parent (.flex) pour afficher : flex.
2. Supprimez la hauteur : 100 % ; règle de l'élément enfant (.flex-child).

Exemple :

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

.flex-child {
  background: red;
  width: 100%; /* Removed height: 100%; */
  display: block;
}

Approche alternative pour le remplissage partiel

Dans les cas où le remplissage d'une seule partie du conteneur parent est souhaité, un enfant flexible supplémentaire (.spacer) peut être ajouté pour occuper l'espace restant.

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

Conclusion

En comprenant la différence entre les valeurs spécifiées et utilisées, les développeurs peuvent surmonter les problèmes de hauteur de pourcentage dans les colonnes flexbox. Bien qu'une solution de contournement spécifique au navigateur puisse être nécessaire dans certains cas, il est prévu que les mises à jour des spécifications résolvent ces limitations à l'avenir.

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!