ch möchte ein vertikales Menü mit einer bestimmten Höhe habe

Jedes Kind muss die Höhe des Elternteils ausfüllen und mittig ausgerichteten Text haben.

Die Anzahl der Kinder ist zufällig, daher muss ich mit dynamischen Werten arbeiten.

Div.container enthält eine zufällige Anzahl von Kindern .item) die immer die Höhe des Elternteils ausfüllen müssen. Um das zu erreichen, habe ich flexbox verwendet.

Für Links mit Text, der auf die Mitte ausgerichtet ist, verwende ichdisplay: table-cell Technik. Für die Verwendung von Tabellendisplays muss jedoch eine Höhe von 100% verwendet werden.

Mein Problem ist, dass.item-inner { height: 100% } funktioniert nicht im Webkit (Chrome).

Gibt es eine Lösung für dieses Problem?Oder gibt es eine andere Technik, um alle @ zu mach.item Füllen Sie die Höhe des übergeordneten Elements mit vertikal zur Mitte ausgerichtetem Text?

Beispiel hier jsFiddle, sollte in Firefox und Chrome angezeigt werden

.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>