所以，在尝试使用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的行为相匹配。
任何想法都是好的。链接到已知的问题或这种行为背后的推理也是有用的。