CSS flex :column. Not taking full width of parent
<p>I have a vertical navigation bar with list items:</p>

<pre><code>&lt;ul class="nav"&gt;
    &lt;li&gt;
      &lt;div&gt;
        &lt;i class="fa fa-tachometer"&gt;&lt;/i&gt;
        &lt;a href="#" class="noselect"&gt;Dashboard&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="act_item"&gt;
        &lt;i class="fa fa-users"&gt;&lt;/i&gt;
        &lt;a class="noselect"&gt;Groups&lt;/a&gt;
        &lt;span class="arrow_right"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div&gt;
        &lt;i class="fa fa-archive"&gt;&lt;/i&gt;
        &lt;a class="noselect"&gt;Projects&lt;/a&gt;
        &lt;span class="arrow_right"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div&gt;
        &lt;i class="fa fa-cogs"&gt;&lt;/i&gt;
        &lt;a class="noselect"&gt;Settings&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p>CSS:</p>

<pre><code>  .left .nav {
margin-top: 1em;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
position: relative; }
.left .nav li {
  position: relative;
  cursor: pointer;
  background: #1879C7;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  border-top: 2px solid #4D5A63; }
  .left .nav li:last-child {
    border-bottom: 2px solid #303E47; }
  .left .nav li:hover &gt; div {
    margin-left: 0.5em; }
  .left .nav li div {
    position: relative;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    height: 30px;
    padding: 0.5em;
    background: #243139; }
    .left .nav li div i {
      position: relative;
      padding-top: 5px; }
    .left .nav li div a {
      position: inherit;
      margin: auto 1em auto 0.5em;
      font-size: 18px;
      color: #F4F4F4; }
    .left .nav li div .arrow_right {
      margin: auto 0 auto auto; }
  .left .nav li .act_item {
    margin-left: 0.5em; }
</code></pre>

<p><a href="https://i.stack.imgur.com/60kaA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60kaA.png" alt="Navigation bar"></a></p>

<p>I want to be able to add additional options to let's say Groups so I want to have <code>.nav &gt; li</code> as <code>flex-direction: column</code> , but if i try to do this the <code>div</code> inside does not take full width of the parent(<code>li</code>).</p>

<p>I have tried to make the child <code>div</code> to have <code>width:100%;</code> but it overflows the container and arrow is not seen. </p>

<p>How can I make the child <code>div</code> (inside <code>.nav &gt; li</code>) to fill up parent element while list being <code>flex-direction:column;</code>.</p>