html - 无法滚动到容器溢出的 flex 元素顶部

Question

在尝试使用 flexbox 制作有用的模态时，我发现似乎是浏览器问题，想知道是否有已知的修复或解决方法 - 或者关于如何解决它的想法。

我要解决的问题有两个方面。首先，让模态窗口垂直居中，这按预期工作。第二个是让模态窗口滚动——在外部，所以整个模态窗口滚动，而不是其中的内容(这样你就可以有下拉菜单和其他可以扩展到模态边界之外的 UI 元素——例如自定义日期选择器等)

但是，当将垂直居中与滚动条结合使用时，模态框的顶部会变得无法访问，因为它开始溢出。在上面的示例中，您可以调整大小以强制溢出，这样做可以让您滚动到模态框的底部，但不能滚动到顶部(第一段被截断)。

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center; */
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

<div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

这会影响(当前的)Firefox、Safari、Chrome 和 Opera。有趣的是，如果您在 IE10 供应商前缀 CSS 中发表评论，它在 IE10 中的行为确实正确——我还没有在 IE11 中进行测试，但假设该行为与 IE10 的行为相匹配。

这是示例代码的链接(高度简化)

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

Answer 1

问题

Flexbox 使居中变得非常容易。

通过简单地将 align-items: center 和 justify-content: center 应用到 flex 容器，您的 flex 元素将垂直和水平居中。

但是，当 flex 元素大于 flex 容器时，此方法会出现问题。

如问题中所述，当 flex 元素溢出容器时，顶部将无法访问。

对于水平溢出，左侧部分变得不可访问(或右侧部分，在 RTL 语言中)。

这是一个包含 justify-content: center 和三个 flex 元素的 LTR 容器的示例:

有关此行为的解释，请参阅此答案的底部。

---

解决方案#1

要解决此问题，请使用 flexbox auto margins ，而不是 justify-content。

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

所以在 flex 容器上代替这段代码:

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

在 flex 元素上使用此代码:

.flex-item {
    margin: auto;
}

Revised Demo

---

解决方案 #2(大多数浏览器尚未实现)

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

justify-content: safe center

或

align-self: safe center

来自CSS Box Alignment Module specification :

4.4. Overflow Alignment: the safe and unsafe keywords and scroll safety limits

When the [flex item] is larger than the [flex container], it will overflow. Some alignment modes, if honored in this situation, may cause data loss: for example, if the contents of a sidebar are centered, when they overflow they may send part of their boxes past the viewport’s start edge, which can’t be scrolled to.

To control this situation, an overflow alignment mode can be explicitly specified. Unsafe alignment honors the specified alignment mode in overflow situations, even if it causes data loss, while safe alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.

The default behavior is to contain the alignment subject within the scrollable area, though at the time of writing this safety feature is not yet implemented.

safe

If the size of the [flex item] overflows the [flex container], the [flex item] is instead aligned as if the alignment mode were [flex-start].

unsafe

Regardless of the relative sizes of the [flex item] and [flex container], the given alignment value is honored.

注意:盒子对齐模块用于多个盒子布局模型，而不仅仅是 flex。所以在上面的规范摘录中，括号中的术语实际上是“对齐主题”、“对齐容器”和“开始”。我使用特定于 flex 的术语来关注这个特定问题。

---

来自 MDN 的滚动限制说明:

Flex item considerations

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container.

This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge [...], as you can't scroll to that area, even if there is content there!

In a future release, the alignment properties will be extended to have a "safe" option as well.

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow.

Instead of using the align- properties, just put auto margins on the flex items you wish to center.

Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.

The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not.

However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.