Es kann kein Bildlauf zum Anfang des Flex-Elements ausgeführt werden, bei dem der Container überläuft.

ei dem Versuch, mithilfe von Flexbox ein nützliches Modal zu erstellen, habe ich festgestellt, dass es sich anscheinend um ein Browserproblem handelt, und ich frage mich, ob es ein bekanntes Update oder eine Problemumgehung gib

Die Sache, die ich zu lösen versuche, hat zwei Aspekte. Zuerst wird das modale Fenster vertikal zentriert, was wie erwartet funktioniert. Die zweite Möglichkeit besteht darin, das modale Fenster zum Scrollen zu bringen - extern, damit das gesamte modale Fenster gescrollt wird und nicht der Inhalt darin (dies bedeutet, dass Sie Dropdown-Listen und andere UI-Elemente haben können, die außerhalb der Grenzen des modalen Fensters liegen). wie eine benutzerdefinierte Datumsauswahl usw.)

Wenn Sie jedoch die vertikale Zentrierung mit Bildlaufleisten kombinieren, kann die Oberseite des Modals unzugänglich werden, wenn es zu überlaufen beginnt. Im obigen Beispiel können Sie die Größe ändern, um den Überlauf zu erzwingen. Auf diese Weise können Sie zum unteren Rand des Modals, aber nicht zum oberen Rand scrollen (der erste Absatz ist abgeschnitten).

Hier ist der Link zum Beispielcode (stark vereinfacht)

https: //jsfiddle.net/dh9k18k0/2

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

Diese Effekte (aktuell) Firefox, Safari, Chrome und Opera. Interessanterweise verhält es sich in IE10 korrekt, wenn Sie in dem vom IE10-Vender vorangestellten CSS einen Kommentar abgeben. Ich habe mich noch nicht mit dem Testen in IE11 befasst, gehe aber davon aus, dass das Verhalten dem von entspricht IE10.

Irgendwelche Ideen wären gut. Links zu bekannten Problemen oder Begründungen für dieses Verhalten sind ebenfalls hilfreich.

Antworten auf die Frage(14)

Ihre Antwort auf die Frage