Le titre de Impossible de faire défiler vers le haut de l'élément flexible dans le conteneur de débordement est réécrit comme suit : Impossible de faire défiler vers le haut de l'élément flexible dans le conteneur de débordement

Question

En essayant de créer un modal utile à l'aide de flexbox, je suis tombé sur ce qui semble être un problème de navigateur et je me demandais s'il existait un correctif ou une solution de contournement connu - ou des idées sur la façon de le résoudre. Le problème que j'essaie de résoudre a deux aspects. Premièrement, centrer verticalement la fenêtre modale fonctionne comme prévu. La seconde consiste à faire défiler la fenêtre modale - avec un défilement externe, de sorte que toute la fenêtre modale défile, pas son contenu (de cette façon, vous pouvez avoir des menus déroulants et d'autres éléments d'interface utilisateur qui peuvent s'étendre au-delà de la portée du modal - comme un attente du sélecteur de date personnalisé). Cependant, lors du centrage vertical avec défilement

P粉846294303 · Answer

Je n’ai utilisé que 3 contenants pour obtenir cet effet. L'astuce consiste à séparer le conteneur flexbox du conteneur qui contrôle le défilement. Enfin, mettez le tout dans un conteneur racine pour le centrer. Voici les styles clés dont vous avez besoin pour créer l'effet :

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


  
    
      Lorem ipsum dolor sit amet.

J'ai créé une démo ici : https://jsfiddle.net/r5jxtgba/14/

P粉670838735 · Answer

Question

Flexbox rend le centrage très facile.

Appliquez simplement align-items: center和justify-content: center sur le conteneur flexible et vos éléments flexibles seront centrés verticalement et horizontalement.

Cependant, cette approche pose un problème lorsque les éléments flexibles sont plus grands que le conteneur flexible.

Comme indiqué dans la question, lorsqu'un élément flexible déborde du conteneur, le haut devient inaccessible.

Avec un débordement horizontal, la partie gauche devient inaccessible (ou la partie droite dans les langages RTL).

Voici un exemple de conteneur LTR contenant justify-content: center et trois éléments flexibles :

Voir le bas de cette réponse pour une description de ce comportement.

Solution #1

Pour résoudre ce problème, utilisez marges automatiques Flexbox au lieu de justify-content.

Grâce aux marges auto, les éléments flexibles débordés peuvent être centrés verticalement et horizontalement sans perdre l'accès à aucune partie d'entre eux.

Alors, n'utilisez pas ce code sur un conteneur flexible :

#flex-container {
    align-items: center;
    justify-content: center;
}

Utilisez ce code sur l'article flexible :

.flex-item {
    margin: auto;
}

Démo révisée

Solution n°2 (pas encore implémentée dans la plupart des navigateurs)

Ajoutez la valeur safe à vos règles d'alignement des mots clés comme ceci :

justify-content: safe center

ou

align-self: safe center

De Spécification du module d'alignement de boîte CSS :

Remarque : Le module Box Alignment fonctionne avec plusieurs modèles de disposition de boîtes, pas seulement avec la flexibilité. Ainsi, dans l'extrait de spécifications ci-dessus, les termes entre crochets sont en fait « corps d'alignement », « conteneur d'alignement » et « start ». J'utilise une terminologie spécifique à Flex pour rester concentré sur ce problème particulier.

Question

Solution #1

Solution n°2 (pas encore implémentée dans la plupart des navigateurs)

Instructions de limite de défilement de MDN :