IE10 - Trouble using flexbox to center multi-line text vertically within a div

Question

Here's what I've got so far:

http://codepen.io/anon/pen/jPQjMZ

HTML:

<div class="container">
  <div class="info">
    This Is Info
  </div>
</div>

<div class="container">
  <div class="info">
    This Is More Info
  </div>
</div>

CSS: (LESS)

body {
  background: #000;
}

.container {
  background: #eee;
  width: 150px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}

.info {
  background: #404040;
  color: #fff;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-align-items: center;
  font-size: 1.4em;
  padding: 1em;
  text-align: center;
  height: 20px;
  //overflow: hidden;
}

This works great in Chrome and Firefox. But in IE10, the text fails to wrap:

What's going on and how do I fix this? I don't necessarily have to use flexbox, but it's the only way I could figure out how to center the text perfectly within the div whether it's one line or two.

Answer 1

If you wrap your info text in an extra <span> , you can use the double line-height trick from this other question to vertically center the text (without using flexbox ):
How do I vertically align something inside a span tag?

Note: I had to remove the vertical padding and instead set the total height to 3em

.info {
  background: #404040;
  color: #fff;
  font-size: 1.4em;

  padding: 0 1em;
  /*height: 3em;*/
  line-height: 3em;
  text-align: center;
}
.info span {
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}

Updated Pen: http://codepen.io/anon/pen/aOQegy