Bootstrap: How To Make All equal height

Question

How can I make all <li>'s of equal height? (on all window sizes - except mobile) I tried using flexbox but somehow I'm doing something wrong. Is flexbox the best way to achieve this or is there another method? Thanks in advance.

HTML

<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand visible-xs" href="#">JIJWIJ</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav nav-justified navbar-nav">
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li class="hidden-xs nav-nohover"><a href="#">&nbsp;</a>
                <li><a href="#">home</a>
                </li>
                <li><a href="#">about blabla</a>
                </li>
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">my blablabla <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
                <li><a href="#">my other blablabla</a>
                </li>
                <li><a href="#">bla &amp; blablabla</a>
                </li>
                <li><a href="#">handy blabla</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">contact <span class="caret"></span></a>
                  <ul class="dropdown-menu pull-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
      </ul>
    </div>
</nav>

CSS

.navbar-nav {
  width: auto;
  height: auto;
}

.navbar-default {
  padding-top: 0px;
  background: #eb6909;
  border: none;
  color: #fff;
}

.navbar-nav>li {
  float: none;
  height: 100%;
}

.navbar-default .navbar-nav>li>a {
  color: #ffffff;
}

.navbar-nav li:nth-child(1) a {
  background-color: #eb6909;
}

.navbar-nav li:nth-child(2) a {
  background-color: #ef7f01;
}

.navbar-nav li:nth-child(3) a {
  background-color: #e85011;
}

.navbar-nav li:nth-child(4) a {
  background-color: #e40061;
}

.navbar-nav li:nth-child(5) a {
  background-color: #e12d85;
}

.navbar-nav li:nth-child(6) a {
  background-color: #013F8a;
}

.navbar-nav li:nth-child(7) a {
  background-color: #25afe0;
}

.navbar-nav li:nth-child(8) a {
  background-color: #189fd6;
}

.navbar-nav li:nth-child(9) a {
  background-color: #00a7ad;
}

.navbar-nav li:nth-child(10) a {
  background-color: #54b9a7;
}

.navbar-nav li:nth-child(11) a {
  background-color: #27a22d;
}

.nav-nohover {
  pointer-events: none;
}

.navbar-nav>li.dropdown>ul.dropdown-menu>li {
  display: block;
}

.navbar-nav>li.dropdown>ul.dropdown-menu,
.navbar-nav>li.dropdown>ul.dropdown-menu>li,
.navbar-nav>li.dropdown>ul.dropdown-menu>li a {
  background-color: #fff;
}

@media (min-width: 768px) {
  .navbar-collapse {
    padding: 0px;
  }
}

The fiddle: https://jsfiddle.net/Hiuxing/ce7za0zp/