无法滚动到溢出容器的弹性项目的顶部
所以，在尝试使用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 。
任何想法都会很好。 已知问题的链接，或这种行为背后的推理也是有用的。
Flexbox使居中非常容易。
通过简单地将align-items: center和justify-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。但是，如果您尝试在多行柔性框中使用基于边距的居中replace
justify-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>
