无法滚动到溢出容器的弹性项目的顶部

所以,在尝试使用flexbox制作一个有用的模式时,我发现似乎是一个浏览器问题,并且想知道是否有一个已知的修复或解决方法 – 或者如何解决它的想法。

我试图解决的事情有两个方面。 首先,让模态窗口垂直居中,按预期工作。 第二个是让模态窗口滚动 – 外部,所以整个模式窗口滚动,而不是它的内容(这样你就可以有下拉菜单和其他UI元素,可以扩展到模态范围之外 – 像自定义dateselect器等)

但是,当将垂直居中与滚动条组合在一起时,模态的顶部可能变得无法访问,因为它开始溢出。 在上面的例子中,你可以resize来强制溢出,这样做可以让你滚动到模态的底部,但不能到顶部(第一段被截断)。

这里是示例代码的链接(高度简化)

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中正确的行为,如果你在IE10供应商前缀的CSS评论 – 我没有打扰在IE11testing,但假设行为匹配的IE10 。

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

3 Solutions collect form web for “无法滚动到溢出容器的弹性项目的顶部”

Flexbox使居中非常容易。

通过简单地将align-items: centerjustify-content: center到flex容器,您的flex项目将以垂直和水平为中心。

但是,当Flex项目大于flex容器时,此方法存在问题。 如问题所述,当弹性项目溢出容器顶部变得不可访问。

在这里输入图像描述

对于水平溢出,左侧部分变得不可访问(或在RTL写入模式下的右侧部分)。 这里有一个容器有justify-content: center和三个flex项目的例子:

在这里输入图像描述

这是修复: flexbox自动边距

使用auto边距,溢出的Flex项目可以垂直和水平居中,而不会丢失对其任何部分的访问权限。

而不是flex容器上的这个代码:

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

在flex项目上使用此代码:

 .flex-item { margin: auto; } 

在这里输入图像描述

修订的演示

另请参见第56框: alignmentFlex项目的方法


从MDN滚动限制的说明:

灵活的项目考虑

与其他CSS中的居中方法不同,Flexbox的alignment属性“真正”居中。 这意味着Flex项目将保持居中,即使它们溢出Flex容器。

但是,如果它们溢出页面的顶部边缘,或者左边缘溢出,则无法滚动到该区域,即使有内容,也可能会出现问题。

在将来的版本中,alignment属性将被扩展为具有“安全”选项。

现在,如果这是一个问题,你可以使用利润来实现中心,因为他们会以“安全”的方式做出反应,如果溢出则停止对中。

而不是使用align-属性,只需要在你想要居中的flex项目上放置auto边距。

而不是justify-属性,将柔性容器中第一个和最后一个Flex项目的外边缘的自动边距。

auto边距将“弯曲”并呈现剩余空间,当有剩余空间时将弯曲项目居中,并在没有剩余空间时切换到正常alignment。

但是,如果您尝试在多行柔性框中使用基于边距的居中replacejustify-content ,那么您可能运气不佳,因为您需要将边距放在每行的第一个和最后一个flex项目上。 除非您可以提前预测哪些项目将在哪条线上结束,否则无法可靠地在主轴上使用基于边缘的居中来replacejustify-content属性。

那么,就像墨菲定律那样,我在发表这个问题后所做的阅读导致了一些结果 – 没有完全解决,但有些有用。

在发布之前,我用最小高度进行了一些调整,但是并没有意识到这个规范相当新的固有尺寸限制。

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

在flexbox区域中添加min-height: min-content确实可以解决Chrome中的问题,并且使用供应商前缀也可以修复Opera和Safari,尽pipeFirefox仍然没有解决。

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

我想我find了一个解决scheme。 它适用于大量的文本和一些文本 。 你不需要指定任何东西的宽度,它应该在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> 
  • 在<head>中定义元素的最佳实践是什么?
  • 使用JavaScript获取原始的html代码
  • 在JavaScript中,我如何“清除”后面(历史-1)?
  • 了解“后/redirect/获取”
  • 在php中通过POSTinput多个相同的名称
  • 如何在TBODY元素之间放置空格
  • 使用Javascript获取单选button值
  • 我怎样才能使覆盖层的CSS玻璃/模糊效果工作?
  • 如何在html页面上绘制圆圈?
  • 变暗的CSS背景图像?
  • 为CSS自定义游标使用外部图像