Flexbox垂直对齐溢出[重复]

Question

我终于开始为我的新设计尝试 flexbox，因为它终于可以解决这个古老的问题，你如何在屏幕上垂直居中一堆文本......只是发现，这并不容易和我想的一样。

如果内容高于容器，则内容的顶部实际上将被隐藏并且无法通过滚动访问。 Chrome 和 Firefox 的行为相同。我创建了一个 Codepen 演示来重现该问题：http://codepen.io/perrin4869/pen/LGKOwy

该演示包含 3 种不同的垂直居中内容方法。 transform: translateX(-50%) 和 display: flex 方法的行为完全相同，table 方法的工作方式几乎与我预期的一样，但缺点来自实际使用 display: table。

编辑： 问题是，有没有办法让flexbox 的溢出行为类似于display: table 示例中的溢出？

Answer 1

我找到的解决方案是在.container.flex 中给.content 元素一个max-height: 100%。这解决了剪辑问题并保持内容居中。

请看新版本：http://codepen.io/wilman/pen/NxZzqN

您会注意到小版本中的文本溢出了绿色框，但也许您可以将其视为一个单独的，不是那么困难的问题。 :)

编辑：正如其他消息来源所建议的那样，将 margin: auto 0; 添加到内容元素也可以解决滚动问题。