Unexpected height while using flexbox model - css

Question

I'm trying to make a side menu and i want to use flexbox model. But i have a problem that i haven't solved.
In my menu there are some list element (like dashboard, componenets, ...). This list elements are in <a> tag. When you look with inspector tool the height of <a> tag is normal but containing <li> tags height is strangely long. There is some padding in <li> but not that much. There is no reaseon for the <li> is long like this.
The reason that i use flexbox model in <a> is there is some other element is <a> to be positioned in my original project. But i didn't put them in this example.
The height of <a>: https://postimg.org/image/7cqo2pazf/
The height of <li>: https://postimg.org/image/kgw8feaqz/
Why do you think this strangely long height of <li> is happened?
.left-menu {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
width: 220px;
background-color: #eee;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.left-menu .menu-container>ul {
margin: 0px;
padding: 0px;
}
.left-menu .menu-container>ul>li {
padding: 2px 8px;
}
.left-menu .menu-container>ul>li>a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
position: relative;
padding: 6px 8px;
text-decoration: none;
font-size: .875em;
border-radius: 4px;
font-weight: bold;
color: #111;
}
.left-menu .menu-container>ul>li>a:hover {
background: rgba(212, 212, 212, 0.5);
}
<div class="left-menu">
<div class="menu-container">
<ul>
<li>Dashboard</li>
<li>Components</li>
<li>Forms</li>
<li>Tables</li>
</ul>
</div>
</div>

Answer 1

Simply add display:block to your list.
.left-menu .menu-container>ul>li {
padding: 2px 8px;
display: block;
}
Have a look at this snippet
.left-menu {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
width: 220px;
background-color: #eee;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.left-menu .menu-container>ul {
margin: 0px;
padding: 0px;
}
.left-menu .menu-container>ul>li {
padding: 2px 8px;
display:block;
}
.left-menu .menu-container>ul>li>a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
position: relative;
padding: 6px 8px;
text-decoration: none;
font-size: .875em;
border-radius: 4px;
font-weight: bold;
color: #111;
}
.left-menu .menu-container>ul>li>a:hover {
background: rgba(212, 212, 212, 0.5);
}
<div class="left-menu">
<div class="menu-container">
<ul>
<li>Dashboard</li>
<li>Components</li>
<li>Forms</li>
<li>Tables</li>
</ul>
</div>
</div>