Der Titel „Scrollen zum Anfang des Flex-Elements im Überlaufcontainer nicht möglich“ wird wie folgt umgeschrieben: „Scrollen zum Anfang des Flex-Elements im Überlaufcontainer nicht möglich.“

Question

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
}

<div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">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.</p>
            <p class="p3">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.</p>
            <p class="p3">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.</p>
        </div>
    </div>
</div>

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

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

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

Answer 1

我只用了3个容器就实现了这个效果。诀窍是将flexbox容器与控制滚动的容器分开。最后，将所有内容放入一个根容器以居中显示。以下是创建效果所需的关键样式：

.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>

我在这里创建了一个演示：https://jsfiddle.net/r5jxtgba/14/

Answer 2

问题

Flexbox使居中变得非常容易。

只需将align-items: center和justify-content: center应用于flex容器，您的flex项目将垂直和水平居中。

然而，当flex项目大于flex容器时，这种方法存在一个问题。

如问题中所指出的，当flex项目溢出容器时，顶部变得无法访问。

对于水平溢出，左侧部分变得无法访问（或者在RTL语言中为右侧部分）。

下面是一个LTR容器的示例，其中包含justify-content: center和三个flex项目：

有关此行为的说明，请参见本答案底部。

---

解决方案＃1

为了解决这个问题，请使用flexbox自动边距，而不是justify-content。

使用auto边距，溢出的flex项目可以在垂直和水平方向上居中，而不会失去对其任何部分的访问。

所以，不要在flex容器上使用这段代码：

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

在flex项目上使用这段代码：

.flex-item {
    margin: auto;
}

修订演示

---

解决方案＃2（大多数浏览器尚未实现）

将safe值添加到您的关键字对齐规则中，如下所示：

justify-content: safe center

或者

align-self: safe center

来自CSS Box Alignment模块规范：

注意：Box Alignment模块适用于多个盒子布局模型，而不仅仅是flex。因此，在上述规范摘录中，方括号中的术语实际上是“对齐主体”、“对齐容器”和“start”。我使用了特定于flex的术语，以保持对这个特定问题的关注。

---

来自MDN的滚动限制说明：