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

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
}

这会影响（当前）Firefox，Safari，Chrome和Opera。如果您在以IE10开头的CSS中注释的话，它确实会在IE10中正确地运行-我还没有在IE11中进行测试，但是假设其行为与IE10相匹配。 。

任何想法都很好。链接到已知问题或此行为背后的原因也将很有用。

Answer 1

问题
Flexbox使居中非常容易。

通过简单的应用align-items: center，并justify-content: center以柔性容器，你的Flex项目（S）将垂直和水平居中。

但是，当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

4.4。溢出对齐：safe和和unsafe关键字以及滚动安全限制

当[flex项目]大于[flex容器]时，它将溢出。如果在这种情况下使用某些对齐方式，则可能会导致数据丢失：例如，如果侧边栏的内容居中，则当它们溢出时，它们可能会将部分框发送到视口的开始边缘之外，而无法滚动到。

为了控制这种情况，可以明确指定溢出对齐方式。Unsafe对齐会在溢出情况下遵循指定的对齐方式，即使这会导致数据丢失，而safe对齐会在溢出情况下更改对齐方式，从而避免数据丢失。

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

safe

如果[flex item]的大小溢出[flex container]，则将[flex item]对齐，就好像对齐方式是[ flex-start]。

unsafe

无论[flex item]和[flex container]的相对大小如何，都应遵守给定的对齐值。

注意：“框对齐模块”可用于多个框布局模型，而不仅仅是flex。因此，在上面的摘录中，方括号中的术语实际上是“对齐主题”，“对齐容器”和“ start”。我使用了特定于flex的术语来保持对这个特定问题的关注。

MDN的滚动限制说明：

与CSS中的其他居中方法不同，Flexbox的对齐属性进行“真正”居中。这意味着即使弹性项目溢出弹性容器，弹性项目也将保持居中。

但是，如果它们溢出页面的顶部边缘或左​​侧边缘，有时可能会出现问题，因为即使其中有内容，您也无法滚动到该区域！

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

现在，如果这是一个问题，您可以改用边距来实现居中，因为它们将以“安全”的方式进行响应，并在溢出时停止居中。

无需使用align-属性，只需将auto边距放在要居中的弹性项目上。

代替justify-属性，将自动页边距放在flex容器中第一个和最后一个flex项的外边缘上。

该auto利润率将“灵活”，并承担剩余的空间，围绕柔性物品时，有剩余的空间，并切换到正常的排列时，没有。

但是，如果您要替换justify-content多行flexbox中基于边距的居中，则可能不走运，因为您需要在每行的第一个和最后一个flex项目上放置边距。除非您可以提前预测哪些项目将在哪一行结束，否则您将无法可靠地在主轴中使用基于边距的居中中心来替换justify-content属性。