使用flexbox时，缺少影响表单输入的字体回退

Question

在搜索垂直居中div的最佳方式（古老的困境）时，我偶然发现了使用flexbox时丢失字体的问题。

请参阅此CodePen以获取我将在下面描述的实例： http://codepen.io/Mattaton/pen/PNzWEQ

- 我的所有测试都在Windows 7上使用Chrome -

我使用flexbox在表单上进行水平和垂直居中。这工作正常，直到我意识到如果缺少字体，表单输入将在其容器之外运行。

在此示例中，'Open Sans', Helvetica, Arial, sans-serif;上的默认字体系列为body。 （CodePen中的$font-set1）

工作正常，但如果删除Open Sans $font-set2，大多数Windows PC上都缺少Helvetica，因此它应该回退到Arial。它做了什么，sorta。 字体表面本身会在输入占位符中看到变化。字体看起来像Arial，但输入大小变为我认为容器没有预料到的东西，并且它们不会扩展以补偿/包含输入。

转到$font-set3，其中Arial是第一个字体并安装在Windows PC上，然后输入再次正确。

所有这些仅在使用flexbox进行居中时才会发生。如果我在.form-wrapper上停用了flexbox，那么整个表单将扩展为.signup-form上设置的完整最大宽度800px。

我不确定这是否是我无能为力的错误，或者我是否可以做些什么来修复它。有人知道吗？

这是描述问题的图片：