Tag: 浏览器的错误

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

所以，在尝试使用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 […]