无法滚动到溢出容器的弹性项目的顶部

2024-02-08

在尝试使用 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/ https://jsfiddle.net/dh9k18k0/2/

问题

Flexbox 使居中变得非常容易。

通过简单地申请align-items: center and justify-content: center对于弹性容器，您的弹性项目将垂直和水平居中。

但是，当 Flex 项目大于 Flex 容器时，此方法会出现问题。

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

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

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

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

解决方案#1

要解决此问题，请使用Flexbox 自动边距 https://stackoverflow.com/a/33856609/3597276，代替justify-content.

With auto边距，溢出的弹性项目可以垂直和水平居中，而不会失去对其任何部分的访问。

因此，不要在 Flex 容器上使用以下代码：

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

在弹性项目上使用此代码：

.flex-item {
    margin: auto;
}

修改后的演示 https://jsfiddle.net/dh9k18k0/9/

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

Add the safe关键字对齐规则的值，如下所示：

justify-content: safe center

align-self: safe center

来自CSS 框对齐模块规范 https://www.w3.org/TR/css-align-3/:

4.4.溢出对齐：safe and unsafe关键词和滚动安全限制 http://www.w3.org/TR/css-align-3/#overflow-values

当[flex item]大于[flex container]时，它将溢出。如果在这种情况下遵循某些对齐模式，可能会导致数据丢失：例如，如果侧边栏的内容是居中，当它们溢出时，它们可能会将部分盒子发送过去视口的起始边缘，无法滚动到该边缘。

为了控制这种情况，溢出对齐模式可以是明确指定。Unsafe对齐方式遵循指定的溢出情况下的对齐模式，即使会导致数据丢失，尽管safealignment 改变溢出时的对齐方式情况，以避免数据丢失。

默认行为是将对齐主题包含在可滚动区域，尽管在撰写本文时此安全功能是尚未实现。

safe

如果 [flex item] 的大小溢出 [flex container]，则 [flex item] 改为对齐，就像对齐模式一样 [flex-start].

unsafe

无论 [flex item] 和 [flex 容器]，遵循给定的对齐值。

注意：盒子对齐模块可用于多个盒子布局模型，而不仅仅是 Flex。因此，在上面的规范摘录中，括号中的术语实际上表示“对齐主题”、“对齐容器”和“start”。我使用了 Flex 特定的术语来将注意力集中在这个特定问题上。

MDN 对滚动限制的解释：

弹性项目考虑因素 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flex_item_considerations

Flexbox 的对齐属性可以“真正”居中，与其他对齐属性不同 CSS 中的居中方法。这意味着弹性项目将保留居中，即使它们溢出了弹性容器。

然而，如果它们溢出超过了，这有时可能会出现问题页面的上边缘，或左边缘 [...]，如即使那里有内容，您也无法滚动到该区域！

在未来的版本中，对齐属性将扩展为具有也是一个“安全”选项。

目前，如果这是一个问题，您可以使用边距来实现居中，因为他们会以“安全”的方式做出反应，并在以下情况下停止居中：他们溢出了。

而不是使用align-属性，只需输入auto边距您想要居中的弹性项目。

而不是justify-属性，将自动边距放在外面 Flex 容器中第一个和最后一个 Flex 项目的边缘。

The auto边距将“弯曲”并占据剩余空间，当有剩余空间时将弹性项目居中，并切换不时恢复正常对齐。

但是，如果您想替换justify-content和在多行 Flexbox 中基于边距的居中，您可能无法使用运气好，因为您需要将边距放在第一个和最后一个弹性项目上在每行上。除非你能提前预测哪些项目会最终在哪一行，您无法可靠地使用基于边距的居中主轴更换justify-content财产。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)