How to make all navbar <li>s the same width - css

Question

I am using Angular 4, Bootstrap 4 alpha 6 (css). I am trying to make each <li> the equal width (not 100% of the navbar). I was trying to use flex box but I cant get it to make them all equal.
I've tried several ways but each time the items will all be a fixed width but not the same width.
Heres an example of what I'm trying to do
[ ---item 1--- | ---item 2--- | ---item 3--- ]
HTML
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ng-container *ngIf="isLoggedIn">
<span class="navbar-text"> </span>
<ul class="nav navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item">My Account</a>
<a class="dropdown-item">My Account</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" [routerLink]="['/profile', 'view']">My Account</a>
<a class="dropdown-item" [routerLink]="['/profile']">Edit my Profile</a>
</div>
</li>
</ul>
</ul>
</div>
</nav>
CSS
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li{
width: 100%
}
.nav.navbar-nav > li{
border-right: 2px solid white;
}
EDIT: This works but I would prefer to use flex so that its done automatically
.nav.navbar-nav > li{
border-right: 2px solid white;
width: 200px;
max-width: 200px;
text-align: center;
}
Other ways I've tried
1)
.navbar ul.nav {
!*margin: 0;*!
display: table;
width: 100%;
!*direction: rtl;*!
table-layout: fixed;
margin:0;
padding:0;
}
.navbar ul.nav li {
!*float: right;*!
display: table-cell;
width: 20%;
!*float: none;*!
text-align: center;
!*direction: rtl;*!
}
.navbar .nav > li:hover {
background-color: #808080
}
.navbar .nav li:first-child a {
!*border-left: 0;*!
!*border-radius: 3px 0 0 3px;*!
}
.nav.navbar-nav > li{
!*width: 10%;*!
border-right: 2px solid white;
}
2)
nav {
text-align: center;
margin: 20px 0 0 ;
padding: 10px 0;
}
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
}
nav li {
display: inline-block;
padding: 5px 5px;
}
nav a {
font-weight: normal;
padding: 10px 5px;
}

Answer 1

Use calc() Basically by dividing 100% width by 3 each li will be 1/3 in width. Next you can set each "a" to 100% (width will be 100% of parent) and display:inline-block (so that width takes effect.
nav li{
width: calc(100% / 3);
}

Answer 2

I really don't see how you can get them to be the same size without giving your <nav> some kind of width. However, if you do give it a width, you can get all your child elements to be the same width using a combination of display: table; and display: table-cell. It's all the niceties of <table> without the syntactic commitment.
nav {
width: 50%;
position: relative;
}
nav ul {
display: table;
padding: 0;
margin: 0;
width: 100%;
}
nav ul li {
text-align: center;
display: table-cell;
border: 1px solid black;
}
<nav>
<ul>
<li>Fizz</li>
<li>Buzz</li>
<li>Foo</li>
</ul>
</nav>