My vertical navigation bar includes the following 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; }
https://i.sstatic.net/60kaA.png
I am looking to extend the options under "Groups" in my navigation, but when I set .nav > li with flex-direction: column, the child div does not expand to fill the parent li.
I have attempted to use width:100% on the child div, but this causes overflow and hides the arrow.
Is there a way to make the child div (inside .nav > li) expand to fill the parent element while maintaining flex-direction:column; for the list?