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

Question

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>

Answer 1

您必须添加height: 100%; box-sizing: border-box;到acss

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>