输入标签上的Flexbox垂直对齐问题

基本上,我有一个label与文本input内嵌在Flexbox的彼此,与input弯曲,align-items设置为基线.该input挠曲填写含有div正常,但label用的底部对齐input,而不是在文本基线应该的.

此问题出现在Chrome和其他WebKit浏览器中.

这是代码.您可以查看它在此Codepen中的呈现方式.

HTML:

  Email:
  

CSS:

div{
  width:20rem;
  background:#999;
  padding:.5rem;

  display:flex;
  align-items:baseline;
}

input{
  flex:1;
}

如果你注释掉display: flex,对齐是正确的,但自然它不再弯曲.

如何在不使用hack的情况下解决这个问题align-items: center？

注意:我最初在一个不同的问题上发布了这个问题并回答了它并被删除了.我按照建议修改了它,希望它现在符合指南.