[SOLVED] Avoid extra space in anchor caused by line height

Avoid extra space in anchor caused by line height - flex layout

I have this set of boxes with links and they are displayed as flex items. The problem is that the coverage of the clickable area(yellow area) is not consistent due to the height of each box. Setting the line height of anchor tag to zero will fix the issue but that introduces other problems like overlapping text. How can I fix this issue while keeping both line height and flex behavior?

Thanks

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
  background: #fff;
  flex: 1 1 0;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  /*height: 100%;
  box-sizing: border-box;*/
  width: 100%;
}

<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blahdfdfdfdfdfdfd
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>

Solution

You must add height: 100%; box-sizing: border-box; to the a css

ul {
  list-style: none;
  display: flex;
}

li {
  border: 1px solid red;
  background: #fff;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  height: 100%;
  box-sizing: border-box;
}

<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blah
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>