无法滚动到溢出容器的flex项目的顶部 [英] Can't scroll to top of flex item that is overflowing container

问题描述

所以，在尝试使用flexbox做一个有用的模式，我发现似乎是一个浏览器问题，我想知道是否有一个已知的修复或解决方法 - 或如何解决它的想法。

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

然而，当结合垂直居中和滚动条时，模态的顶部可能变得不可访问，因为它开始溢出。在上面的例子中，你可以调整大小以强制溢出，这样做允许你滚动到模态的底部，但不是顶部（第一段被切断）。

这是示例代码的链接（高度简化）

对于水平溢出，左边的部分变得不可访问（或在RTL写入模式中的右边部分）。下面是一个包含 justify-content：center 和三个flex项目的容器的示例：

使用 auto

在flex容器上代替这个代码：

 ＃flex-container {
 align-items：center; 
 justify-content：center; 
} 
  

在flex项目上使用此代码：

  .flex-item {
 margin：auto; 
} 
  

修改的演示

另请参阅框56：对齐Flex项目的方法

---

来自MDN的滚动限制说明：

Flex项目
注意事项

与其他CSS中的
中心方法不同，Flexbox的对齐方式属性这意味着flex项目将保持
居中，即使它们溢出flex容器。

这有时可能有问题，但是，如果他们溢出
页面的顶部边缘或左​​边缘[...]，作为
，即使有内容，也不能滚动到该区域。

在以后的版本中，对齐属性将扩展为
asafe选项。

现在，是一个关注，你可以改为使用边距实现
居中，因为他们将以安全的方式响应，如果
溢出，停止中心。

而不是使用 align - 属性，只需将 auto



而不是 justify - 属性，在弹性容器中的第一个和最后一个flex项目的外部
边上设置自动边距。

auto margin将flex并假定剩余空间，
在存在剩余空间时使flex项目居中，并且在不存在时将
切换到正常对齐。

但是，如果您试图用多行flexbox中以
为基础的换行符替换 justify-content 可能出于
运气，因为你需要把边距放在第一个和最后一个flex项目
在每一行。除非你可以提前预测哪些项目将
结束在哪一行，你不能可靠地使用基于边缘的中心
主轴替换 justify-content 属性。




So, in attempting to make a useful modal using flexbox, I found what seems to be a browser issue and am wondering if there is a known fix or workaround -- or ideas on how to resolve it.

The thing I'm trying to solve, has two aspects. First, getting the modal window vertically centered, which works as expected. The second is to get the modal window to scroll -- externally, so the whole modal window scrolls, not the contents within it (this is so you can have dropdowns and other UI elements that can extend outside of the bounds of the modal -- like a custom date picker, etc.)

However, when combining the vertical centering with scroll bars, the top of the modal can become inaccessible as it begins to overflow. In the above example, you can resize to force the overflow, and in doing so it allows you to scroll to the bottom of the modal, but not to the top (first paragraph is cut off).

Here's the link to the example code (highly simplified)

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
}

This effects (current) Firefox, Safari, Chrome, and Opera.. It does interestingly behave correctly in IE10 if you comment in the IE10 vender prefixed css -- I did not bother testing in IE11 yet, but assume the behavior matches that of IE10.

Any ideas would be good. Links to known issues, or reasoning behind this behavior would also be useful.

解决方案

Flexbox makes centering very easy.

By simply applying align-items: center and justify-content: center to the flex container, your flex item(s) will be vertically and horizontally centered.

However, there is a problem with this method when the flex item is bigger than the flex container. As noted in the question, when the flex item overflows the container the top becomes inaccessible.

For horizontal overflow, the left section becomes inaccessible (or right section, in RTL writing-mode). Here's an example with a container having justify-content: center and three flex items:

Here's the fix: flexbox auto margins

With auto margins, an overflowing flex item can be vertically and horizontally centered without losing access to any part of it.

Instead of this code on the flex container:

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

Use this code on the flex item:

.flex-item {
    margin: auto;
}

Revised Demo

See also Box #56 here: Methods for Aligning Flex Items

---

Explanation for scroll limitation from 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.

这篇关于无法滚动到溢出容器的flex项目的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！