不能滚动到正在溢出容器的伸缩项目的顶部

在试图使一个有用的模式使用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/

92307 次浏览
小开

好吧，正如墨菲定律所言，我在提出这个问题后所做的阅读产生了一些结果——虽然没有完全解决，但还是有些有用的。

在发布之前，我对最小高度进行了一些研究，但没有意识到内在的大小限制，这对规范来说是相当新的。

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

在flexbox区域中添加min-height: min-content确实解决了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的想法，以及其他潜在的解决方案。

小开
最佳答案

这个问题

Flexbox使定心非常容易。

通过简单地将align-items: center和justify-content: center应用到伸缩容器，您的伸缩项将垂直和水平居中。

但是，当伸缩项大于伸缩容器时，此方法存在一个问题。

如问题中所述，当伸缩项溢出容器时，顶部将无法访问。

enter image description here

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

下面是一个有justify-content: center和三个伸缩项的LTR容器的例子:

enter image description here

关于这种行为的解释，请参阅答案的底部。

解决方案1

要解决这个问题，请使用<强劲>flexbox汽车利润率，而不是justify-content。

使用auto边距，一个溢出的伸缩项可以垂直和水平居中，而不会失去对它的任何部分的访问。

因此，在flex容器上的代码不是这样的:

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

在flex项目上使用以下代码:

.flex-item {
margin: auto;
}

enter image description here

revision Demo .

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

将safe值添加到关键字对齐规则中，如下所示:

justify-content: safe center

或

align-self: safe center

从CSS盒对齐模块规范:

4.4。溢出对齐:safe和unsafe关键字和 滚动的安全 限制< /强> < / > < / p >

当[flex item]比[flex container]大时，它会 溢出。一些对齐模式，如果在这种情况下，可能 导致数据丢失:如侧栏内容为 居中，当它们溢出时，它们可以将部分箱子发送过去

.视图的开始边缘，不能滚动到 为了控制这种情况，< em >溢出对齐< / em >模式可以是 显式地指定。Unsafe对齐尊重指定的 对齐模式在溢出情况下，即使导致数据丢失， 而safe对齐改变了overflow中的对齐模式 试图避免数据丢失的情况。

对象中包含对齐主题 可滚动区域，尽管在编写此安全功能的时候

< em > safe < / em >

如果[flex item]的大小溢出[flex container]，则[bb0]将被删除 [flex item]被改为对齐，就像对齐模式是一样 [flex-start]。< / p >

< em > unsafe < / em >

不管[flex item]和[flex . size]的相对大小

.

.

.

注意:盒子对齐模块用于跨多个盒子布局模型，而不仅仅是flex。所以在上面的规范摘录中，括号中的术语实际上说的是“对齐主题”，“对齐容器”和“start”。我使用特定于flex的术语来关注这个特定的问题。

MDN的滚动限制说明:

Flex项目 考虑< /强> < / > < / p > Flexbox的对齐属性做“真正的”居中，不像其他 CSS中的居中方法。这意味着伸缩物品将会保留 居中，即使它们溢出伸缩容器

然而，如果它们溢出超过 页面的上边缘，或者左边缘…), 你不能滚动到那个区域，即使那里有内容!< / p > 在未来的版本中，对齐属性将扩展为 这也是一个“安全”的选择

现在，如果这是一个问题，你可以使用边缘来实现 定心，因为他们会以一种“安全”的方式回应，如果停止定心 他们溢出。< / p >

不使用align-属性，只添加auto边距

.

.

而不是justify-属性，将auto边距放在外面 伸缩容器中第一个和最后一个伸缩项的边 auto边距将“伸缩”并假定剩余空间， 有剩余空间时将伸缩件居中，并进行切换

然而，如果你试图将justify-content替换为 在多行flexbox中，基于边缘的居中，您可能会失去 运气，因为您需要在第一个和最后一个伸缩项上设置页边距 每一行。除非你能提前预测哪些项目会 在哪一行结束，你不能可靠地使用基于边缘的居中

. properties

. properties
小开

我想我找到解决办法了。它适用于大量文本和一小段文字。你不需要指定任何东西的宽度，它应该在IE8中工作。

.wrap1 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
.wrap2 {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.wrap3 {
vertical-align: middle;
display: table-cell;
}
.wrap4 {
margin: 10px;
}
.dialog {
text-align: left;
background-color: white;
padding: 5px;
border-radius: 3px;
margin: auto;
display: inline-block;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4">
<div class="dialog">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>

小开

根据MDN， safe值现在可以提供给像align-items和justify-content这样的属性。具体描述如下:

如果项的大小溢出对齐容器，则该项将按对齐模式start进行对齐。

所以，它可以这样使用。

.rule
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: safe center;
}

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

小开

我只用了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:

<div class="root">
<div class="scroll-container">
<div class="flex-container">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>

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

小开

我还使用了额外的容器

超文本标记语言

<div class="modal-container">
<div class="modal">
<div class="content-container">
<div class="content">
<p>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>
</div>

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 > https://jsfiddle.net/Nash171/cpf4weq5/

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

小开

2容器Flex方法与表回退测试IE8-9, Flex工作在IE10,11。 编辑:编辑以确保最小内容时垂直居中，增加了传统支持

正如Michael回答的那样，这个问题源于高度继承自视口大小，这会导致儿童溢出。https://stackoverflow.com/a/33455342/3500688

一些更简单的东西，使用flex来维护弹出式容器(content)中的布局: 

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
/* display: flex; */
/* flex-wrap: wrap; */
}
<!--[if lt IE 10]>
<style>
#popup {
display: table;
width:100%;
}
.iewrapper {
display: table-cell;
vertical-align: middle;
}
</style>
<![endif]-->
<div id="popup">
<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
<div class="container">
<p class="p3">Test</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>
<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>

小开

你可能应该使用margin: auto技术，但如果你出于某种原因不想使用flexbox，你可以使用带有垂直对齐hack的伪元素来实现这一点。

< a href = " https://codepen。io/dslavov/pen/eYReEeN" rel="nofollow noreferrer">示例 . io/dslavov/pen/eYReEeN" rel="nofollow noreferrer">

如果codepen不起作用

<div class="wrapper">
<div class="modal"></div>
</div>


<style>
.wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
overflow-y: auto;
text-align: center;
}


/* Required for centering */
.wrapper:before {
content: '';
height: 100%;
width: 0;
vertical-align: middle;
display: inline-block;
}


.modal {
/* Required for centering */
display: inline-block;
vertical-align: middle;




text-align: left;
width: 320px;
height: 320px;
background-color: #fff;
border-radius: 25px;
}
</style>

它的工作原理是创建一个内联元素，作为父元素的全高度，并显示为内联块，就像你的目标元素(.modal)一样，然后在两者上使用vertical-align: middle，浏览器就会发挥它的魔力——它将.modal和伪元素对齐，就像它们是常规文本一样。你也可以在模态div上使用上下垂直对齐。结合文本对齐，模态可以放置在任何位置。

你可以在父对象上使用text-align: center来水平居中对话框。应该支持在任何浏览器和溢出也工作。

在撰写本文时(2021年9月15日)，以隐身模式转到谷歌会显示一个cookie策略模式，该模式使用这种技术来居中。

小开

而不是justify-content: center，添加两个div，其中flex: 1作为伸缩容器的第一个和最后一个子容器。

html,
body {
background-color: blue;
height: 100%;
overflow: hidden;
}
.container {
background-color: red;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden auto;
}


.flex-1 {
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="flex-1"></div>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
<p>
This is a static template, there is no bundler or bundling involved!
This is a static template, there is no bundler or bundling involved!
</p>
<div class="flex-1"></div>
</div>
</body>
</html>

小开

试试这个!

<div class="flex-container">
<div class="item">First item</div>
<div class="item">Second item</div>
<div class="item">Third item</div>
</div>

.flex-container {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;


.item:first-child {
margin-left: auto;
}


.item:last-child {
margin-right: auto;
}
}
小开

我的案例使用水平伸缩和溢出，确实是一个boomer。我试图在水平弯曲上制作可滚动的内容，如下面的例子:

div {
display: flex;
justify-content: center;
overflow-x: auto;
}


pre {
padding: 30px;
background: gray;
margin: 20px;
}
<div>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
</div>

解决方案是在第一个和最后一个元素上使用margin:auto:

div {
display: flex;
justify-content: flex-start;
overflow-x: auto;
}


pre {
padding: 30px;
background: gray;
margin: 20px;
}


pre:first-child { margin-left: auto; }


pre:last-child { margin-right: auto; }
<p>When overflow:</p>
<div>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
</div>




<p>When not overflow:</p>
<div>
<pre>Item</pre>
<pre>Item</pre>
<pre>Item</pre>
</div>

希望能有所帮助


提交答案