7
无法滚动到容器溢出的弹性项目的顶部
因此，在尝试使用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: …
258
html
css
flexbox
browser-bugs