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

Question

<p>在尝试使用flexbox创建一个有用的模态框时，我发现了一个似乎是浏览器问题的情况，并想知道是否有已知的修复方法或解决方法 - 或者对如何解决它有什么想法。</p> <p>我试图解决的问题有两个方面。首先，垂直居中模态窗口，这个功能按预期工作。第二个是让模态窗口滚动 - 外部滚动，所以整个模态窗口滚动，而不是其中的内容（这样你可以有下拉菜单和其他可以超出模态框范围的UI元素 - 如自定义日期选择器等）。</p> <p>然而，当将垂直居中与滚动条结合使用时，模态框的顶部可能变得无法访问，因为它开始溢出。在上面的示例中，您可以调整大小以强制溢出，在这样做时，它允许您滚动到模态框的底部，但无法滚动到顶部（第一段被截断）。</p> <p><br />></p>

.modal-container {
  位置：固定；
  顶部：0；
  左：0；
  底部：0；
  右：0；
  背景：rgba(0,0,0,0.5);
  溢出-x：自动；
}
.modal-container .modal-window {
  显示：-ms-flexbox；
  显示：柔性；
  弹性方向：列；
  对齐项目：居中；
  调整内容：居中；
  /* 确认滚动行为的可选支持在 IE10 中有意义
  //-ms-flex-方向：列；
  //-ms-flex-align: 中心;
  //-ms-flex-pack: 中心; */
  高度：100%；
}
.modal-container .modal-window .modal-content {
  边框：1px实心#ccc；
  边框半径：4px；
  背景：#fff；
  宽度：100%；
  最大宽度：500px；
  内边距：10 像素
}</前>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum 是印刷和排版行业的简单虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商拿走了一堆字体并将其打乱以制作一本字体样本簿。它不仅经历了五个世纪的考验，而且跨越了电子排版的时代，基本保持不变。它在 20 世纪 60 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近又随着包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版软件而流行。
            <p class="p3">Lorem Ipsum 是印刷和排版行业的简单虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商拿走了一堆字体并将其打乱以制作一本字体样本簿。它不仅经历了五个世纪的考验，而且跨越了电子排版的时代，基本保持不变。它在 20 世纪 60 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近又随着包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版软件而流行。
            <p class="p3">Lorem Ipsum 是印刷和排版行业的简单虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商拿走了一堆字体并将其打乱以制作一本字体样本簿。它不仅经历了五个世纪的考验，而且跨越了电子排版的时代，基本保持不变。它在 20 世纪 60 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近又随着包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版软件而流行。
        

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