title: 100% width & height Anchor inside flexbox for Webkit Browsers
body: <p>I need to create a 100% width &amp; height link inside of a flexbox. This does render successfully in Firefox, IE11, <strong>but not webkit browsers like Chrome.</strong> Webkit expands the width, but does <strong>NOT</strong> expand to 100% height. In this scenario, it is only the height of the one line of text. Firefox and IE11 do expand the anchor the the full height of the list-item.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.height-100vh  {
       height: 100vh;
  }
  
  ul.flex-column  {
       padding: 0;
       margin: 0;
  }
  
  ul.flex-column li  {
       list-style: none;
  }
  
  .flex-column  {
       display: -webkit-box;
       display: -webkit-flex;
       display: -moz-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-flex-flow: column wrap;
       -ms-flex-flow: column wrap;
       flex-flow: column wrap;
  }
  
  .flex-cell  {
       -webkit-box-flex: 1;
       -webkit-flex: 1;
       -moz-box-flex: 1;
       -ms-flex: 1;
       flex: 1;
  }
  
  .flex-full  {
       width: 100%;
       height: 100%;
  }
  
  .full-anchor {
      display:block;
      width: 100%;
      height: 100%;
      background: #000;
      color: #FFF;
  }
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;body class="height-100vh"&gt;
  
      &lt;ul class="flex-column flex-full"&gt;
          &lt;li class="flex-cell"&gt;&lt;a href="#" class="full-anchor"&gt;hello&lt;/a&gt;&lt;/li&gt;
          &lt;li class="flex-cell"&gt;&lt;a href="#" class="full-anchor"&gt;hello&lt;/a&gt;&lt;/li&gt;
          &lt;li class="flex-cell"&gt;&lt;a href="#" class="full-anchor"&gt;hello&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Are there potentially some prefixes that I am not using? I am using autoprefixr. Also to note: I'm using normalize.css.</p>