flexbox is misbehaving with javascript active class-CodePudding

Navbar Beginner here As you can see everything is working perfectly until you click on the space between the links you can check here- my codepen. when I click on the links navbar it perfectly shows the active class, but if I click in between the space the whole navbar loses the class.

var element = document.getElementsByClassName("flex-nav")[0];
element.addEventListener("click", myFunction);
function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null) {
    elems.classList.remove("active");
  }
  e.target.className = "active";
}

.flex-nav {
  display: flex;
  flex-direction: column;
  margin-top: 54px;
  background: #333;
  width: 75px;
  height: 657px;
  justify-content: space-around;
  align-items: stretch;
  line-height: 23px;
}

.flex-nav a{
  text-decoration: none;
  color: white;
  flex-wrap: wrap;
  text-align: center;
  margin: 5px;
  border: 1px solid transparent;
}

.flex-nav a.active {
  background: #9999ff;
}
.flex-nav a:hover:not(.active) {
 background: #555;
 border: 1px solid rgba(255, 51, 153,1);
}

  <div >
     <a href="#" style="order:3">2k</a>
     <a href="#" style="order:2">4k</a>
     <a href="#" style="order:4">1080p</a>
     <a href="#" style="order:1">8k</a>
   </div>

CodePudding user response：

You can avoid that behaviour by letting the flex items grow so that there is no space between them: Add these settings to .flex-nav a

flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;

(The first is for the growing, the others are for centering the text inside them)