无法滚动到溢出容器的flex项目的顶部的标题重写为：无法将溢出容器中的flex项目滚动至顶部

Question

在尝试使用flexbox创建一个有用的模态框时，我发现了一个似乎是浏览器问题的情况，并想知道是否有已知的修复方法或解决方法-或者对如何解决它有什么想法。我试图解决的问题有两个方面。首先，垂直居中模态窗口，这个功能按预期工作。第二个是让模态窗口滚动-外部滚动，所以整个模态窗口滚动，而不是其中的内容（这样你可以有下拉菜单和其他可以超出模态框范围的UI元素-如自定义日期选择器等）。然而，当将垂直居中与滚

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的滚动限制说明：