Flexbox 垂直对齐溢出

Question

我终于开始尝试为我的新设计尝试 flexbox，因为它最终可以解决古老的问题，你如何在屏幕上垂直居中一堆文本......结果却发现，这并不像我想象的那么容易.

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

该演示包含 3 种不同的垂直居中内容方法。无论是transform: translateX(-50%)和display: flex方法的行为完全一致，表法作品几乎我怎么指望它的工作，与来自实际使用的缺点display: table。

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

Answer 1

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

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

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

编辑：正如其他来源建议添加margin: auto 0;到内容元素也解决了滚动问题。