Pourquoi mon élément collant cesse-t-il de coller dans un conteneur Flexbox ?

Un élément collant reste bloqué lors de l'utilisation de Flexbox

Vous avez rencontré un problème où un élément collant perd son caractère collant lorsqu'il est placé dans un conteneur flexbox . Cela se produit parce que les éléments flexbox s'étirent intrinsèquement pour remplir leur espace disponible, ce qui fait que tous les éléments partagent la même hauteur et gênent le défilement vertical.

Correction : ajuster l'alignement

Pour résoudre ceci, ajoutez "align-self: flex-start" à l'élément collant. Cela force la hauteur de l'élément à être automatique plutôt que fixe, permettant à la page de défiler comme prévu.

Compatibilité des navigateurs

Bien que la plupart des navigateurs prennent en charge ce correctif, Safari nécessite un Préfixe "-webkit-" pour le positionnement collant. De plus, le positionnement collant peut présenter des problèmes avec les tableaux dans certains navigateurs, à l'exception de Firefox.

Code mis à jour :

.flexbox-wrapper {
  display: flex;
  overflow: auto;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

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!