Eu quero ter um menu vertical com uma altura específica.

Cada filho deve preencher a altura dos pais e ter um texto alinhado ao meio.

O número de filhos é aleatório, então eu tenho que trabalhar com valores dinâmicos.

Div.container contém um número aleatório de filhos (.item) que sempre precisam preencher a altura do pai. Para conseguir isso, usei o flexbox.

Para criar links com texto alinhado ao meio, estou usandodisplay: table-cell técnica. Mas o uso de exibições de tabela exige o uso de uma altura de 100%.

Meu problema é que.item-inner { height: 100% } não está funcionando no webkit (Chrome).

Existe uma correção para esse problema?Ou existe uma técnica diferente para tornar tudo.item preencher a altura dos pais com o texto vertical alinhado ao meio?

Exemplo aqui jsFiddle, deve ser visualizado no Firefox e Chrome

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>