使导航列表项的高度为父Flex容器的100％

Question

我正在尝试弄清楚如何强制我的flexbox导航栏中的<li>项占据标题高度的100％。

目标是让用户在鼠标悬停在项目上时显示一个蓝色栏。我在这里嘲笑了我的简单示例：https://codepen.io/anon/pen/jZzeqL

我试图搞乱对齐项目，但我所做的一切似乎打破了中心水平对齐。

＆＃13;

＆＃13;

/* header styles */
.header {
  grid-area: header;
  background-color: #444;
  color: #fff;
  align-items: center;
  display: flex;
  margin: 0 2em;
}

#logo {
  font-weight: 300;
  font-size: 160%;
}

#logo, nav {
  flex: 1;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: flex-end;
  font-size: 110%;
}

nav li {
  font-size: 14px;
  padding: 0px 10px;
}

nav li span.active {
  border-bottom: 3px solid #00A2D3; 
}

nav li > .username {
  font-weight: 400;
  padding-right: 3px;
}

＆＃13;

 <header class="header">
      <div id="logo">Dashboard</div>
      <nav>
        <ul role=navigation>
          <li><span class="far-li"><i class="far fa-bell"></i></span></li>
          <li><span class="fas-li"><i class="fas fa-cog"></i></span></li>
          <li><span class="username active">test-email@gmail.com</span><span class="fas-li"><i class="fas fa-caret-down"></i></span></li>          
        </ul>
      </nav>
    </header>

＆＃13;

＆＃13;

＆＃13;