Chrome / Safari not filling 100% height of flex parent

I want to have a vertical menu with a specific height.

Each child must fill the height of the parent and have middle-aligned text.

The number of children is random, so I have to work with dynamic values.

Div .container contains a random number of children (.item) that always have to fill the height of the parent. To achieve that I used flexbox.

For making links with text aligned to the middle I am using display: table-cell technique. But using table displays requires using a height 100%.

My problem is that .item-inner { height: 100% } is not working in webkit (Chrome).

1. Is there a fix for this problem?
2. Or is there a different technique to make all .item fill the height of the parent with text vertical aligned to middle?

Example here jsFiddle, should be viewed in Firefox and 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>