相关疑难解决方法(0)

第三行中的第一行文本.box被提升到div的顶部并被切断.我希望它看起来和第二个盒子一样(实际上理想情况下就像第二个盒子一样...).

1. 这可以用flexbox完成吗？
2. 如果没有,可以用其他CSS完成吗？
3. 如果没有,用JS做到最好的方法是什么？
4. 另外,为什么第一个框的文本中心对齐？

http://codepen.io/loren/pen/ojxORN

<div class='box'>
  one line of text
</div>

<div class='box'>
  two lines of text lorem ipsum
</div>

<div class='box'>
  thre lines of text lorem ipsum sin dolor whatever etc
</div>

.box 
  height 40px
  font-size 16px
  width 150px
  border 1px solid black
  margin-bottom 40px
  display flex
  align-items center
  text-align center
  overflow-y hidden