Как выровнять и растянуть содержимое по вертикали, используя CSS flexbox

Используя CSS flexbox, как я могу одновременно центрировать содержимое всех элементов подряд по вертикали, сохраняя одинаковую высоту для всех без использования CSS?height атрибут?

Подробности - http://jsbin.com/efaCEVa/1/edit

Ответы на вопрос(3)

  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex
HTML

    A
    B
    C

CSS
.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

Нет причин делать это с Flexbox. Свойства table / table-cell были в состоянии сделать это в течение длительного времени:

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

Вот как это выглядит с Flexbox:

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

ВАШ ОТВЕТ НА ВОПРОС