フレックスボックス - <a>タグブレークレイアウト

Question

フレックスボックスバナーに問題があります。
アンカータグを追加して、フレックスボックスレイアウトが破損するリンク全体にリンクを張るとき、アンカータグの幅と高さを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

display: flexの要素は、の子を柔軟なボックスレイアウトで配置します。

<article>の唯一の子は<a>であるため、フレックスボックスには唯一の要素が配置されています。

代わりに記事の周りにリンクを置きます。 div要素は記事の子要素になります。