Pourquoi « hauteur : 100 % » ne fonctionne-t-il pas comme prévu dans les colonnes Flexbox dans Chrome ?

Problèmes de hauteur dans les colonnes Flexbox : une bizarrerie de Chrome

Dans les colonnes flexbox, vous pouvez rencontrer des difficultés lors de l'utilisation de pourcentages de hauteur pour dimensionner les éléments enfants. Ce problème provient d'une bizarrerie dans la gestion par Chrome de la spécification flexbox.

Considérons l'exemple suivant :

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

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

.flex {
  background: blue;
  flex: 1;
}

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

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

Vous vous attendriez à ce que l'élément rouge .flex-child occupe l'emplacement toute la hauteur de son parent bleu .flex. Cependant, height:100% ne fonctionne pas comme prévu.

Solution :

Pour résoudre ce problème :

1. Modifiez .flex à afficher : flex.
2. Supprimer la hauteur : 100 % de .flex-child.

Cet ajustement garantit que .flex-child remplit tout l'espace au sein de .flex.

Contexte technique :

Dans flexbox, align-self:stretch (la valeur par défaut) détermine la propriété cross-size (ici, la hauteur) d'un élément fléchi. Toutefois, les pourcentages utilisent la valeur de taille croisée spécifiée, et non sa valeur utilisée. Dans ce cas, .flex-child essaie d'occuper 100 % de la hauteur spécifiée de .flex, ce qui est automatique par défaut. Cela perturbe le moteur de mise en page.

Définir .flex pour l'afficher : flex résout le problème en remplaçant le comportement par défaut et en permettant au CSS de niveau supérieur de déterminer la taille de .flex.

Exception :

Cette solution ne fonctionnera pas si vous souhaitez remplir partiellement .flex. Pour y parvenir, vous pouvez ajouter un élément .spacer dans .flex avec flex:1 et définir flex-child sur flex:9 (et flex-direction:column sur .flex). Cependant, il s'agit d'un hack et nous espérons que les futures mises à jour du navigateur corrigeront cette bizarrerie.

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!