Flexbox - <a>标签破坏布局

Question

遇到了一个 Flexbox 广告横幅的问题。
当我添加一个锚链接以使整个横幅成为一个链接时，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>标签中，使整个横幅成为可点击的链接。如果我删除锚点标记，则布局按预期工作。
我错过了什么？

- nicklas bryntesson

---

添加以下内容：a{display:block} - Tariq Javed

Answer 1

你可以尝试这样做：

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

我曾遇到类似问题，采用如下方式解决。

- Charbacca

---

你能引用一下提到这种行为的w3spec吗？这是一个人为制品吗？MDN说display: contents会将锚点从Web可访问性树中移除——这可能对SEO和辅助技术不利。 - user31782

这是对我有效的答案，而不是标记为正确的答案。 - Ben

Answer 2

display: flex属性的元素可以使用弹性盒模型布局来排列其子元素。

<article>元素仅有一个子元素<a>，所以只有该元素被放置在了弹性盒中。

请将链接包围在<article>标签之间，这样<div>元素就会成为<article>的子元素。

- Quentin