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 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 – mit externem 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 Bereich des modalen Fensters hinausgehen können – wie z benutzerdefinierte Datumsauswahl warten). Allerdings beim vertikalen Zentrieren mit Scrollen

P粉846294303 · Answer

我只用了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;
}


  
    
      Lorem ipsum dolor sit amet.

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

P粉670838735 · Answer

问题

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的术语，以保持对这个特定问题的关注。

问题

解决方案＃1

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

来自MDN的滚动限制说明：