Chrome / Safari n'est pas de remplissage de 100% à hauteur de flex parent

Je veux avoir un menu vertical avec une hauteur spécifique.

Chaque enfant doit remplir la hauteur de la mère et de l'avoir moyen-texte aligné.

Le nombre d'enfants est aléatoire, donc je dois travailler avec des valeurs dynamiques.

Div .container contient un nombre aléatoire d'enfants (.item) qui ont toujours à remplir la hauteur de la mère. Pour réaliser cela, j'ai utilisé flexbox.

Pour faire des liens avec le texte aligné au milieu, je suis en utilisant display: table-cell technique. Mais en utilisant le tableau affiche nécessite l'aide d'une hauteur de 100%.

Mon problème est que .item-inner { height: 100% } ne travaille pas dans webkit (Chrome).

  1. Est-il un correctif pour ce problème?
  2. Ou est-il une autre technique pour faire tous les .item remplir la hauteur de la mère avec le texte vertical aligné au milieu?

Exemple ici jsFiddle, devraient être considérés dans Firefox et Chrome

CSS:

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

HTML:

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

  • il a maintenant été corrigé - bugs.chromium.org/p/chromium/issues/detail?id=426898
  • Ce n'est pas spécifiquement pertinents pour l'OP, mais peut être pertinente pour les googlers qui débarquent ici pour "safari affichage de la hauteur absolue de 100% ne marche pas" ou quelque chose de similaire. J'ai un élément comme ça à l'intérieur d'un conteneur flex et a dû préciser top:0 et left:0 pour qu'elle s'affiche comme prévu.
  • n'a pas été encore fixé: stackoverflow.com/questions/46226298/...