title: Chrome / Safari not filling 100% height of flex parent
body: <p>I want to have a vertical menu with a specific height.</p>
  
  <p>Each child must fill the height of the parent and have middle-aligned text.</p>
  
  <p>The number of children is random, so I have to work with dynamic values.</p>
  
  <p>Div <code>.container</code> contains a random number of children (<code>.item</code>) that always have to fill the height of the parent. To achieve that I used flexbox.  </p>
  
  <p>For making links with text aligned to the middle I am using <code>display: table-cell</code> technique. But using table displays requires using a height 100%.</p>
  
  <p>My problem is that <code>.item-inner { height: 100% }</code> is not working in webkit (Chrome).  </p>
  
  <ol>
  <li>Is there a fix for this problem?   </li>
  <li>Or is there a different technique to make all <code>.item</code> fill the height of the parent with text vertical aligned to middle?</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/y8mboo2s/" rel="noreferrer">Example here jsFiddle, should be viewed in Firefox and Chrome</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;
      &lt;div class="item-inner"&gt;
        &lt;a&gt;Button&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item-inner"&gt;
        &lt;a&gt;Button&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;div class="item-inner"&gt;
        &lt;a&gt;Button&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>