使锚标签填充父Flex元素的100%高度和宽度,同时垂直和水平居中

我有一个使用flexbox构建的布局,但有一个方面我似乎无法开始工作.

我有面板,其中有锚标签,我想垂直和水平居中,但我希望锚标签是面板宽度和高度的100%,这样当你点击面板中的任何地方它会链接你,而不是单击链接文本.

这是面板的HTML:

    
        Panel 1
    

和SCSS:

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

请参阅我的Codepen了解整个布局,以便您更好地理解它!

http://codepen.io/zauber/pen/BpRJQG

谢谢您的帮助

不要害怕,让锚定一个弹性箱......

a{
  display: flex;
  justify-content: center;
  align-items: center;
}

你应该添加align-items: stretch到锚的父级.