CSS flex :column. Not taking full width of parent

Question

I have a vertical navigation bar with list items:

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

CSS:

  .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 > 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; }

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

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

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

Answer 1

I hope this is what you're after. You can set the width to 100%; and use box-sizing: border-box; in order to not break out the content.

Instead of the margin-left on the active item, I gave it a border-left: 10px solid #1879C7, because a margin will break the box-sizing: border-box;

Read more about the box-sizing property at Mozilla Developer Network. See my demo below.

  .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 > 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;
    width: 100%;
    box-sizing: border-box;
  }
  
  .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 {
    border-left: 10px solid #1879C7;
  }

<div class="left">


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

</div>