Flexbox - <a> tag breaks layout

Question

Having issues with a Flexbox banner.
When I add an anchor tag to make the whole banner a link the flexbox layout breaks, I tried setting the anchor tag width and height to 100% but that didn't work either.

html {
  height: 100%;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

#banner-section {
  background-color: #f4f4f4;
  margin: 0 auto;
  padding: 3em 1em;
}

.card {
  background-color: white;
  box-shadow: 0px 8px 14px 0px rgba(148, 148, 148, 0.35);
}

.card a:hover {
  box-shadow: 0px 16px 20px 0px rgba(148, 148, 148, 0.61);
}

.info-container1 {
  background-color: plum;
}

.info-container2 {
  background-color: pink;
}

.card-info {
  padding: 1.2em;
}

@media screen and (min-width: 40em) {
  .wrap {
    max-width: 50em;
    margin: 0 auto;
  }
  .banner {
    display: flex;
  }
  .info-container1 {
    width: 50%;
    flex: 1;
  }
  .info-container2 {
    width: 50%;
    flex: 1;
  }
}

<section id="banner-section">
  <div class="wrap">
    <article class="banner card">
      <a href="#">
        <div class="info-container1">
          <div class="card-info">
            <h2>Container 1</h2>
            <p>Lorem ipsum dolor sit amet, usu ei exerci bonorum praesent, duo cu dolorem adipiscing vituperata, in vel atomorum ocurreret. Lorem ipsum dolor sit amet etc etc... </p>
          </div>
          <!-- .card-info -->
        </div>
        <!-- .info-container -->
        <div class="info-container2">
          <div class="card-info">
            <h2>Container 2</h2>
            <p>Ea autem perfecto prodesset mea, sed case hendrerit te, tale vidit accusam ex mel.</p>
          </div>
          <!-- .card-info -->
        </div>
        <!-- .info-container -->
      </a>
    </article>
    <!-- .banner .card -->
  </div>
</section>

Basically I need both columns to be equal in height and width and wrapped in the <a> tag so the whole banner becomes a clickable link. If I remove the anchor tag the layout works as intended.
What is it I'm missing here?

Answer 1

An element with display: flex arranges it's children in a flexible box layout.

The only child of the <article> is the <a> so that is the only element being laid out in the flex box.

Put the link around the article instead. Then the div elements will be the article's children.