title: Make anchor tag fill 100% height and width of parent flex element, whilst being vertically & horizontally centered
body: <p>I have a layout built using flexbox, but there is one aspect I just can't seem to get to work. </p>
  
  <p>I have panels which have anchor tags in them that I want to be vertically and horizontally centered, but I want the anchor tags to be 100% of the width and height of the panel so that when you click anywhere in the panel it will link you, as opposed to just clicking the link text. </p>
  
  <p>Here is the HTML for a panel:</p>
  
  <pre><code>&lt;div class="panel--link panel--one"&gt;
      &lt;a href="#" class="link"&gt;
          Panel 1
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the SCSS:</p>
  
  <pre><code>.panel {
      box-sizing: content-box;
      flex: 1;
      border: 3px solid #fff;
      padding: 0px;
      text-align: center;
  }
  
  .panel--link {
      @extend .panel;
      display: flex;  
      flex: 1;
      justify-content: center;
      align-items: center;
  
      a.link {
          text-decoration: none;
          color: #fff;
          text-transform: uppercase;
          font-weight: 600;
          font-size: 1rem;
          letter-spacing: 3px;
          flex: 1;
      }
  }
  </code></pre>
  
  <p>See my Codepen for the entire layout so you understand it better!</p>
  
  <p><a href="http://codepen.io/zauber/pen/BpRJQG" rel="noreferrer">http://codepen.io/zauber/pen/BpRJQG</a></p>
  
  <p>Thanks for the help</p>