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 résoudre ce problème.

Le problème que j’essaie de résoudre comporte deux aspects. Premièrement, centrer verticalement la fenêtre modale fonctionne comme prévu. La seconde consiste à faire défiler la fenêtre modale - défilement externe, de sorte que toute la fenêtre modale défile, pas le contenu qu'elle contient (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 personnalisé le sélecteur de date attend).

Cependant, lorsque vous utilisez le centrage vertical en conjonction avec des barres de défilement, le haut du modal peut devenir inaccessible lorsqu'il commence à déborder. Dans l'exemple ci-dessus, vous redimensionnez pour forcer le débordement, et ce faisant, cela vous permet de faire défiler vers le bas du modal, mais pas vers le haut (le premier paragraphe est coupé).

.modal-container {
  poste : fixe ;
  haut : 0 ;
  gauche : 0 ;
  bas : 0 ;
  à droite : 0 ;
  arrière-plan : rgba(0, 0, 0, 0,5) ;
  débordement-x : auto ;
}
.modal-conteneur .modal-window {
  affichage : -ms-flexbox ;
  affichage : flexible ;
  direction flexible : colonne ;
  aligner les éléments : centre ;
  justifier-contenu : centre ;
  /* Prise en charge facultative pour confirmer que le comportement de défilement est logique dans IE10
  //-ms-flex-direction : colonne ;
  //-ms-flex-align : centre ;
  //-ms-flex-pack : centre ; */
  hauteur : 100 % ;
}
.modal-container .modal-window .modal-content {
  bordure : 1px solide #ccc ;
  rayon de bordure : 4 px ;
  arrière-plan : #fff ;
  largeur : 100 % ;
  largeur maximale : 500 px ;
  remplissage : 10 px
}≪/pré>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galerie de caractères et l'a brouillée pour en faire un livre de spécimens de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut vers la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus PageMaker incluant des versions de Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galerie de caractères et l'a brouillée pour en faire un livre de spécimens de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut vers la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus PageMaker incluant des versions de Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galerie de caractères et l'a brouillée pour en faire un livre de spécimens de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut vers la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus PageMaker incluant des versions de Lorem Ipsum.</p>
        </div>
    </div>
</div>

行为确实是正确的 - 我还没有在IE11中进行测试，但假设行为与IE10相匹配。

这是示例代码的链接（高度简化）

https://jsfiddle.net/dh9k18k0/2/

Answer 1

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;
}

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

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

Answer 2

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.

---

Instructions de limite de défilement de MDN :