title: How to make a:hover is block color to those parent container in flexbox?
body: <p>For now, I learn to create a navbar with flex, This is my codepen : <a href="https://codepen.io/ahmadfadlydziljalal/pen/wvyxJoZ" rel="nofollow noreferrer">Codepen</a></p>
  <p>I want anchor tag in li when hovering, it will give background color entire height in li,
  With sass, like this :</p>
  <pre><code> ul {
        list-style-type: none;
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 4rem;
        li {
          a {
            text-decoration: none;
            color: $color-0;
          }
  
          a:hover {
            background-color: $color-8;
          }
        }
      }
  </code></pre>
  <p>From this :
  <a href="https://i.stack.imgur.com/XlSK9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlSK9.png" alt="From" /></a></p>
  <p>To this : <a href="https://i.stack.imgur.com/KrQmq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KrQmq.png" alt="To" /></a></p>