Beim Versuch, mit Flexbox ein nützliches Modal zu erstellen, bin ich auf ein scheinbares Browserproblem gestoßen und habe mich gefragt, ob es eine bekannte Lösung oder Problemumgehung gibt – oder irgendwelche Ideen, wie man das Problem beheben kann.

Das Problem, das ich zu lösen versuche, hat zwei Aspekte. Erstens funktioniert die vertikale Zentrierung des modalen Fensters wie erwartet. Die zweite besteht darin, das modale Fenster scrollen zu lassen – externes Scrollen, sodass das gesamte modale Fenster scrollt, nicht der darin enthaltene Inhalt (auf diese Weise können Sie Dropdown-Menüs und andere UI-Elemente haben, die über den Rahmen des modalen Fensters hinausgehen können – wie bei einem benutzerdefinierten Fenster). Datumsauswahl warten).

Wenn Sie jedoch die vertikale Zentrierung in Verbindung mit Bildlaufleisten verwenden, kann es sein, dass der obere Rand des Modals nicht mehr zugänglich ist, da er zu überlaufen beginnt. Im obigen Beispiel ändern Sie die Größe, um einen Überlauf zu erzwingen. Auf diese Weise können Sie zum unteren Rand des Modals scrollen, jedoch nicht zum oberen Rand (der erste Absatz wird abgeschnitten).

.modal-container { Position: fest; oben: 0; links: 0; unten: 0; rechts: 0; Hintergrund: rgba(0, 0, 0, 0,5); Überlauf-x: auto; } .modal-container .modal-window { Anzeige: -ms-flexbox; Anzeige: Flex; Flexrichtung: Spalte; align-items: center; rechtfertigen-Inhalt: Mitte; /* Optionale Unterstützung zur Bestätigung des Scrollverhaltens ist in IE10 sinnvoll //-ms-flex-direction: Spalte; //-ms-flex-align: center; //-ms-flex-pack: center; */ Höhe: 100 %; } .modal-container .modal-window .modal-content { Rand: 1px fest #ccc; Randradius: 4px; Hintergrund: #fff; Breite: 100 %; maximale Breite: 500 Pixel; Polsterung: 10px }

 
 
 
Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere mit Druckschriften nahm und diese zu einem Musterbuch zusammenstellte. Es hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Schriftsatz im Wesentlichen unverändert überstanden. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum, populär gemacht.
 
Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere mit Druckschriften nahm und diese zu einem Musterbuch zusammenstellte. Es hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Schriftsatz im Wesentlichen unverändert überstanden. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum, populär gemacht.
 
Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere mit Druckschriften nahm und diese zu einem Musterbuch zusammenstellte. Es hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Schriftsatz im Wesentlichen unverändert überstanden. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum, populär gemacht.
 
 
 

这影响（当前的）Firefox, Safari, Chrome und Opera的行为确实是正确的 - 我还没有在IE11中进行测试,但假设行为与IE10相匹配.

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

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