I am facing an issue with creating a menu. While I have managed to implement the old bootstrap, the new flexbox feature is proving to be confusing for me. Specifically, I want to have a dark vertical side menu that is 80px wide, with the rest of the screen as a "working area". However, the items in the side menu do not extend fully in width (as indicated by the borders below) and I am struggling to understand why. My current assumption is that it has something to do with flexbox - where an item only takes up the space it requires. Although I have tried copying and modifying code from the bootstrap 4 website, getting the items to have full width is the final hurdle that I can't seem to overcome.
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>