[转]无法滚动到溢出容器的Flex项的顶部

Posted 2021-03-02 oxspirt

原文: http://www.imooc.com/wenda/detail/562829

--------------------------------------------------------------------------------------

无法滚动到溢出容器的Flex项的顶部

Html/CSS

Cats萌萌 2019-06-03 10:44:03

所以，在尝试使用Flexbox建立一个有用的模式时，我发现了一个似乎是浏览器问题的东西，我想知道是否有一个已知的修复或解决方法-或者关于如何解决它的想法。

我想解决的问题有两个方面。首先，获得垂直中心的模态窗口，这是按预期工作的。第二种方法是让模态窗口从外部滚动-因此整个模态窗口滚动，而不是其中的内容(这样您就可以有下拉列表和其他UI元素，这些元素可以扩展到模式边界之外-比如自定义日期选择器，等等)。

然而，当将垂直对中和滚动条组合在一起时，当模式的顶部开始溢出时，就会变得不可访问。在上面的例子中，您可以调整大小以强制溢出，这样做可以让您滚动到模态的底部，而不是顶部(第一段被切断)。

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

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

.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}

这个效果(当前)火狐，Safari，Chrome和Opera。有趣的是，如果你在IE10供应商前缀CSS中发表评论的话，它在IE10中的行为确实是正确的-我还没有费心在IE11中进行测试，但假设它的行为与IE10的行为相匹配。

任何想法都是好的。链接到已知的问题或这种行为背后的推理也是有用的。

 

3 回答

慕容森

问题

Flexbox使对中非常容易。

通过简单的应用align-items: center和justify-content: center对于FLEX容器，您的FLEX项将以垂直和水平为中心。

但是，当FLEX项大于FLEX容器时，此方法存在问题。

正如问题中所指出的，当FLEX项溢出容器时，顶部变得不可访问。

 

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

下面是一个LTR容器的示例justify-content: center还有三件柔韧物品：

 

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

---

解决方案1

若要修复此问题，请使用挠曲箱自动边距，而不是justify-content.

带着auto边距，溢出的挠曲项目可以垂直和水平中心，而不会失去对它的任何部分的访问。

因此，与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盒对齐模块规范:

4.4.溢出对齐：safe和unsafe关键词与滚动安全限值

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

要控制这种情况，溢流对准模式可以显式指定。Unsafe在溢出情况下，对齐遵守指定的对齐模式，即使它会导致数据丢失，而safe在溢出情况下，对齐方式会更改，以避免数据丢失。

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

safe

如果[FLEX项]的大小溢出了[FLEX容器]，则[FLEX项]将像对齐模式一样对齐[FLEX项]。flex-start].

unsafe

无论[FLEXItem]和[FLEX容器]的相对大小如何，给定的对齐值都是受尊重的。

注意：Box对齐模块用于多个盒子布局模型，而不仅仅是FLEX。因此，在上面的规范摘录中，括号中的术语实际上是“对齐主题”、“对齐容器”和“对齐容器”。start“.我用了一些具体的术语来关注这个特定的问题。

---

MDN对滚动限制的解释：

FLEX项目注意事项

Flexbox的对齐属性做“真”对中，不像CSS中的其他对中方法。这意味着FLEX项目将保持居中状态，即使它们溢出了FLEX容器。

但是，如果它们溢出到页面的顶部边缘或左侧边缘[.]，这有时会有问题，因为您不能滚动到该区域，即使那里有内容！

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

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

而不是使用align-属性，只要把auto您希望居中的弹性项目的页边距。

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

这个auto边距将“弯曲”，并假定剩余空间，当有剩余空间时，以弹性项为中心，如果没有，则切换到正常对齐。

但是，如果你想替换justify-content以保证金为中心的多行挠曲盒，你可能是运气不好，因为你需要把第一个和最后一个挠性项目的每一行。除非您能够提前预测哪些项将在哪一行上结束，否则您无法可靠地使用位于主轴的基于保证金的中心位置来替换justify-content财产。