无法滚动到溢出容器的Flex项的顶部

Question

所以，在尝试使用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: 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}这个效果(当前)火狐，Safari，Chrome和Opera。有趣的是，如果你在IE10供应商前缀CSS中发表评论的话，它在IE10中的行为确实是正确的-我还没有费心在IE11中进行测试，但假设它的行为与IE10的行为相匹配。任何想法都是好的。链接到已知的问题或这种行为背后的推理也是有用的。