title: Have child item fill parent using flexbox
body: <p>I have a navigation where I would like to have the child elements (in this case: a tags) fill the height of the flex parent (ul). Is it possible to not use padding and solely rely on flexbox here? Any help would be appreciated here. As you can see in the codepen, the black from the a tags does not fill the area. My eventual plan is to add a border at the top when the a tag is hovered. This is why I need to fill the area. I just want to use flexbox instead of padding if that is possible.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>body,
  html { background:skyblue; padding:0; margin:0; }
  .nav {
      background-color:salmon;
      height:40px;
      ul          { display:flex; align-items:center; height:100%; }
      ul &gt; li     { list-style:none; background:black; flex:1; }
      ul &gt; li &gt; a {  }
  }
  </code></pre>
  
  <p><a href="https://codepen.io/Jesders88/pen/GvQgzX" rel="nofollow noreferrer">https://codepen.io/Jesders88/pen/GvQgzX</a></p>