Pourquoi mon élément collant cesse-t-il de coller à l'intérieur d'un conteneur Flexbox ?

Éléments collants et Flexbox : un piège

Certaines configurations CSS peuvent conduire à un comportement inattendu. Un de ces scénarios se produit lors de la combinaison de position : collant avec flexbox. Initialement, l'élément collant reste stagnant jusqu'à ce qu'il atteigne une position de défilement spécifiée, mais ce comportement cesse lorsqu'il est placé dans un conteneur flexbox.

Le problème

Le problème vient du comportement par défaut de la flexbox. Par défaut, tous les éléments d'un conteneur flexbox s'étirent pour s'adapter à l'espace disponible. Par conséquent, tout élément collant perd sa fonctionnalité prévue car le conteneur flexbox empêche le défilement.

La solution

Pour résoudre ce problème, ajoutez l'align-self : flex-start propriété à l’élément collant. Cela définit la hauteur de l'élément collant sur automatique, permettant au contenu de circuler naturellement et de permettre le défilement.

Compatibilité des navigateurs

La plupart des principaux navigateurs prennent en charge cette solution, bien que Safari nécessite l'utilisation du préfixe -webkit- :

.flexbox-wrapper {
  display: flex;
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* fix */
}

Alors que Firefox ne prend pas en charge l'align-self : flex-start propriété, il ne souffre pas du même problème de défilement avec position: sticky. De plus, position: sticky n'est pas encore entièrement pris en charge pour les tableaux dans tous les navigateurs. Il est conseillé de faire preuve de prudence, en particulier lorsqu'il s'agit de répondre aux exigences spécifiques du navigateur.

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!