html - 无法滚动到溢出包含的flex项目的顶部

因此，在尝试使用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

}

这个效果(当前)Firefox，Safari，Chrome和Opera ..如果你在IE10供应商前缀css中发表评论，它在IE10中的表现确实有趣 - 我还没有在IE11中进行测试，但是假设行为与IE10相符。

任何想法都会很好。 与已知问题的链接或此行为背后的推理也很有用。

6个解决方案

264 votes

问题

Flexbox使中心变得非常容易。

只需将justify-content和justify-content应用于Flex容器，您的flex项目将垂直和水平居中。

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

如问题中所述，当柔性物品溢出容器时，顶部变得不可访问。

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

这是一个LTR容器的示例，其中包含justify-content和三个flex项：

有关此行为的说明，请参阅此答案的底部。

解决方案＃1

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

使用justify-content边距时，溢出的弹性项目可以垂直和水平居中，而不会失去对其任何部分的访问权限。

因此，而不是Flex容器上的此代码：

#flex-container {

align-items: center;

justify-content: center;

}

在flex项上使用此代码：

.flex-item {

margin: auto;

}

修订演示

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

将justify-content值添加到关键字对齐规则中，如下所示：

justify-content: safe center

要么

align-self: safe center

从CSS Box Alignment Module规范：

4.4。 溢出对齐：justify-content和justify-content关键字和   滚动安全  范围

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

要控制这种情况，可以使用溢出对齐模式   明确指定。 justify-content对齐荣誉指定   溢出情况下的对齐模式，即使它导致数据丢失，   justify-content对齐更改溢出中的对齐模式   试图避免数据丢失的情况。

默认行为是包含对齐内的对齐主题   可滚动区域，虽然在撰写本安全功能时是   尚未实现。

justify-content

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

justify-content

无论[flex item]和[flex]的相对大小如何   容器]，给定的对齐值得到尊重。

注意：Box Alignment Module适用于多个盒子布局模型，而不仅仅是flex。 因此，在上面的规范摘录中，括号中的术语实际上是“对齐主题”，“对齐容器”和“justify-content”。 我使用特定于flex的术语来关注这个特定问题。

MDN滚动限制的说明：

Flex项目  注意事项

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

然而，如果它们溢出过去，这有时会成为问题   页面的上边缘，或左边缘[...]，如   你不能滚动到那个区域，即使那里有内容！

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

目前，如果这是一个问题，您可以改为使用边距来实现   居中，因为他们会以“安全”的方式回应并停止居中   他们溢出

而不是使用justify-content属性，只需将justify-content边距放在上面   您希望居中的弹性项目。

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

justify-content边距将“弯曲”并占据剩余空间，   当剩余空间和切换时，将flex项目居中   没有时正常对齐。

但是，如果您正尝试更换justify-content   基于边距的多线Flexbox中心，你可能已经不在了   幸运的是，因为你需要将边距放在第一个和最后一个弹性项目上   在每一行。 除非你能提前预测哪些项目会   最终在哪一行，你不能可靠地使用基于保证金的中心   主轴取代justify-content属性。

Michael_B answered 2019-05-22T14:56:09Z

15 votes

好吧，正如墨菲定律所说的那样，我在发布这个问题之后所做的阅读产生了一些结果 - 没有完全解决，但仍然有些有用。

在发布之前，我在min-height上玩了一下，但是并没有意识到规范中相当新的固有尺寸限制。

[http://caniuse.com/#feat=intrinsic-width]

将min-height: min-content添加到flexbox区域确实解决了Chrome中的问题，并且使用供应商前缀也修复了Opera和Safari，尽管Firefox仍未解决。

min-height: -moz-min-content; // not implemented

min-height: -webkit-min-content // works for opera and safari

min-height: min-content // works for chrome

仍在寻找有关Firefox和其他潜在解决方案的想法。

jejacks0n answered 2019-05-22T14:57:06Z

10 votes

我设法用3个容器将其拉下来。 诀窍是将flexbox容器与控制滚动的容器分开。 最后，将所有内容放入根容器中以使其全部居中。 以下是创建效果的基本样式：

CSS：

.root {

display: flex;

justify-content: center;

align-items: center;

}

.scroll-container {

margin: auto;

max-height: 100%;

overflow: auto;

}

.flex-container {

display: flex;

flex-direction: column;

justify-content: center;

}

HTML：

我在这里创建了一个演示：[https://jsfiddle.net/r5jxtgba/14/]

colinbr96 answered 2019-05-22T14:57:42Z

4 votes

我想我找到了解决方案。 它适用于大量文本和一些文本。 您不需要指定任何宽度，它应该在IE8中工作。

mpen answered 2019-05-22T14:58:21Z

1 votes

根据MDN，start值现在可以提供给start和start等属性。它描述如下：

如果项目的大小溢出对齐容器，则项目将对齐，就像对齐模式为start一样。

因此，它可以如下使用。

.rule

{

display: flex;

flex-direction: row;

justify-content: center;

align-items: safe center;

}

但是，目前还不清楚它有多少浏览器支持，我找不到任何使用它的例子，我自己也遇到过一些问题。 在这里提到它以引起更多关注。

Chris Talman answered 2019-05-22T14:59:15Z

0 votes

我还设法使用额外的容器

HTML

CSS

.modal-container {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: black;

}

.modal {

display: flex;

justify-content: center;

align-items: center;

background-color: #aaa;

height: 80%;

width: 90%;

}

.content-container {

background-color: blue;

max-height: 100%;

overflow: auto;

padding:0;

}

.content {

display: flex;

background-color: red;

padding: 5px;

width: 900px;

height: 300px;

}

在jsfiddle＆gt;[https://jsfiddle.net/Nash171/cpf4weq5/]

更改.content宽度/高度值并查看

Nadeesh Peiris answered 2019-05-22T15:00:03Z