title: How to set full height in flex layout
body: <p>I have a flex layout, and its code like following</p>
  <pre><code>&lt;div class=&quot;navbar-collapse&quot;&gt;
    &lt;ul class=&quot;navbar-nav&quot;&gt;
      &lt;li class=&quot;nav-item &quot;&gt;
          &lt;a href=&quot;/dashboard&quot;&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item &quot;&gt;
          &lt;a href=&quot;/profile&quot;&gt;Profile&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a href=&quot;/logout&quot;&gt;Logout&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And its css like this</p>
  <pre><code>.navbar-collapse {
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
  }
  .navbar-nav {
    margin-left: auto !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: row;
    padding-left: 0;
    list-style: none;
  }
  .navbar-nav .nav-item {
    display: inline-flex;
    text-align: -webkit-match-parent;
    position: relative;
    flex-shrink: 0;
    padding-bottom: 0;
    height: 100%;
  }
  .navbar-nav .nav-item a {
    color: #fff;
    font-weight: 400;
    text-transform: capitalize;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0 0.1rem;
    white-space: nowrap;
    position: relative;
  }
  </code></pre>
  <p>It looks like this</p>
  <p><a href="https://i.stack.imgur.com/D7Oqp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D7Oqp.png" alt="ef" /></a></p>
  <p>The a element currently appears to have no height, and I want it to be as heigh as the parent element, how? Thank you.</p>
  <p>Append:</p>
  <p>The image shows what it looks like when I'm in chrome developer mode. Above is all my code.</p>