「display:flex;」を設定している「<li>タグ」内の「<a>タグ」クリック範囲を拡大する

問題発生

解決できず苦しむ
「<li>タグ」内の「<a>タグ」クリック範囲を拡大しようとするが、うまくいかない

試してみたが、期待した通り動作しなかった内容

aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法

悩んだ末に気が付いたこと

「display:flex;」を設定している場合は、それに合わせた実装を行う必要がある
・「display:flex;」は「入れ子」設定可能
・縦に並べたい場合は「flex-direction:column;」を使用する。<br>タグを使用したり、<p>タグで囲っても改行されない

要件を満たす最低限の内容

CSS

.リストに設定したクラス名 a{

  height: 100%;

  width: 100%;

}

最終的な内容

HTML

<ul>

  <li class="pop-menu-list"><a href="/" class="pop-menu-list-a"><i class="fas fa-home"></i>ホーム</a></li>

  <li class="pop-menu-list"><a href="/category-list" class="pop-menu-list-a"><i class="fas fa-cloud"></i>カテゴリー</a></li>

CSS

.pop-menu-list-a{

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction:column;

}

・Flexboxを使って孫要素まで高さを揃える方法
・Flexbox playground