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

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

当前回答

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

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>

2022-06-09 14:44:16

其他回答

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

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

something more simple and use flex to maintain the layout within the popup container(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; */ }  <div id="popup">  <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>  </div>

2019-03-16 22:45:36

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

div { 显示:flex; justify-content:中心; overflow-x:汽车; ｝ {前填充:30 px; 背景:灰色; 保证金:20 px; ｝ < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div >

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

div { 显示:flex; justify-content: flex-start; overflow-x:汽车; ｝ {前填充:30 px; 背景:灰色; 保证金:20 px; ｝ Pre:第一个孩子{margin-left:自动;｝ Pre:最后一个子{margin-right:自动;｝ < / p > < p >当溢出: < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div > <p>当not overflow时:</p> < div > < >以前项目< / >之前 < >以前项目< / >之前 < >以前项目< / >之前 < / div >

希望能有所帮助

2022-12-01 20:04:06

根据MDN，现在可以为align-items和justify-content等属性提供安全值。具体描述如下:

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

所以，它可以这样使用。

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

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

2017-12-04 13:52:09

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

2022-06-09 14:44:16

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

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

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的想法，以及其他潜在的解决方案。

2015-10-31 17:51:08

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

推荐文章

最新文章

标签