Flexbox - <a> 标签破坏布局

Question

Flexbox 横幅出现问题。
当我添加一个锚标记使整个横幅成为弹性盒布局中断的链接时，我尝试将锚标记的宽度和高度设置为 100%，但这也不起作用。

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>

基本上我需要两列的高度和宽度相等并包裹在<a>标签中，以便整个横幅成为可点击的链接。如果我删除锚标记，布局将按预期工作。
我在这里缺少什么？

Answer 1

你可以试试这个：

<a href="#" style="display: contents;">

我有类似的问题并以这种方式解决了。

Answer 2

元素以灵活的框布局display: flex排列其子元素。

的唯一子元素<article>是 ，<a>因此它是弹性框中布局的唯一元素。

将链接放在文章周围。那么 div 元素将成为文章的子元素。