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;也可以解决滚动问题。