在flexbox中不工作的锚点元素上变换比例

a {
  color: #646c84;
  font-weight: 500;
  line-height: 1.7vw;
  transition: all 0.2s;
}

a:hover {
  color: #ffaf54;
  cursor: pointer;
  transform: scale(1.2);
  text-decoration: none;
}

a:focus {
  color: #646c84;
  text-decoration: none;
}

a:focus:hover {
  color: #ffaf54;
  cursor: pointer;
}

.active-indicator {
  background: #ffaf54;
  border-radius: 25px;
  height: 2px;
  margin-top: -2px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transition: all 0.2s;
  width: 25px;
}

.active-indicator.active {
  opacity: 1;
}

#menu {
  background: whitesmoke;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0 25vw;
  position: fixed;
  left: -1;
  right: -1;
  top: 0;
  transition: all 0.2s;
  z-index: 1;
}

#menu a {
  font-size: 0.9vw;
}

#menu.inactive {
  opacity: 0;
}

<div id="menu">
  <div id="landing-nav">
    <a>Home</a>
    <div class="active-indicator active"></div>
  </div>
  <div id="about-nav">
    <a>About</a>
    <div class="active-indicator"></div>
  </div>
  <div id="portfolio-nav">
    <a>Portfolio</a>
    <div class="active-indicator"></div>
  </div>
  <div id="resume-nav">
    <a>Resume</a>
    <div class="active-indicator"></div>
  </div>
  <div id="contact-nav">
    <a>Contact</a>
    <div class="active-indicator"></div>
  </div>
</div>