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

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

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>