Make anchor tag fill 100% height and width of parent flex element, whilst being vertically & horizontally centered

Question

I have a layout built using flexbox, but there is one aspect I just can't seem to get to work.

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.

Here is the HTML for a panel:

<div class="panel--link panel--one">
    <a href="#" class="link">
        Panel 1
    </a>
</div>

And the 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;
    }
}

See my Codepen for the entire layout so you understand it better!

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

Thanks for the help

Solution 1

Don't be afraid, make anchor flexbox too:

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

and you should add align-items: stretch to parent of anchor.

Solution 2

Remove align-items: center from .content .panel--link and make .content .panel--link a.link a flexbox too and align it vertically using:

display: flex;
justify-content: center;
align-items: center;

See demo below:

body {
  height: 800px;
}
.main {
  height: 100%;
}
.content {
  height: 100%;
  border: 20px solid #fff;
  display: flex;
  box-sizing: border-box;
}
.content .column {
  flex-direction: column;
  width: 33.33333%;
  background: #374550;
  display: flex;
}
.content .panel,
.content .panel--link {
  box-sizing: content-box;
  flex: 1;
  border: 3px solid #fff;
  padding: 0px;
  text-align: center;
}
.content .panel .logo,
.content .panel--link .logo {
  margin: 7.5% 0px 0% 0%;
  width: 80%;
}
.content .panel .blurb,
.content .panel--link .blurb {
  width: 80%;
  margin: 7.5% auto 0% auto;
}
.content .panel .blurb h1,
.content .panel--link .blurb h1 {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-weight: lighter;
  line-height: 220%;
  font-size: 0.85rem;
  margin: 0px;
}
.content .panel .tel,
.content .panel--link .tel {
  margin: 7.5% auto 5% auto;
}
.content .panel .tel h2,
.content .panel--link .tel h2 {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0px;
}
.content .panel--link {
  display: flex;
  flex: 1;
  justify-content: center;
  /*align-items: center;*/
  text-align: center;
}
.content .panel--link a.link {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 3px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .content .column--two {
    order: -1;
  }
  .content .column--two .panel--two {
    order: -1;
  }
}
.content .column--two .panel--one {
  flex-grow: 1;
}
.content .column--two .panel--two {
  flex-grow: 2;
  background: #374550;
}
.content .column--two .panel--three {
  flex-grow: 1;
}

<main class="content">
  <div class="column column--one">

    <div class="panel--link panel--one">
      <a href="#" class="link">
                        Panel 1
                    </a>
    </div>

    <div class="panel--link panel--two">
      <a href="#" class="link">
                        Panel 2
                    </a>
    </div>
  </div>
  <div class="column column--two">
    <div class="panel--link panel--one">
      <a href="" class="link">
                        Panel 3
                    </a>
    </div>
    <div class="panel panel--two">

      <div class="blurb">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lectus orci, imperdiet ac auctor non, tristique eget augue. Curabitur quis gravida lorem, sed maximus purus. Nunc sit amet mollis turpis.</h1>
      </div>
      <div class="tel">
        <h2>123 456 789</h2>
      </div>
    </div>
    <div class="panel--link panel--three">
      <a href="#" class="link">
                        Panel 4
                    </a>
    </div>
  </div>
  <div class="column column--three">
    <div class="panel--link panel--one">
      <a href="#" class="link">
                        Panel 5
                    </a>
    </div>
    <div class="panel--link panel--two">
      <a href="#" class="link">
                        Panel 6
                    </a>
    </div>
  </div>
</main>

Comments

[Sean]

Hey thanks for the answer - this works in Chrome but doesn't work in Safari. I think the reason is that in Safari, it looks at the height of the parent element (the panel) and doesn't see one because the height of the panel is set by flex. That's the problem I'm having!