将光标悬停在Flexbox内仅在文本下划线

Question

我试图在用hover制作的垂直nav上为flexbox进行下划线。在没有nav的水平flexbox上，hover下划线可以正常工作，但是一旦添加flexbox，下划线就会跨越整个框，而不仅仅是文本下方。

看看下面的第一个代码段如何按预期工作，但是一旦我在第二个代码段中将main_nav与flexbox垂直，下划线就会中断。

如何解决此问题，使其在保持nav垂直的同时正确下划线？

#wrapper {
  width: 100%;
  height: 300px;
  background-color: black;
}


#wrapper #main_nav {
  //display: flex;
  //flex-direction: column;
}

.nav_item {
  text-decoration: none;
  color: white;
  display: inline-block
}

.nav_item:after {
  display: block;
  content: '';
  width: 0;
  height: 2px;
  background-color: white;
}

.nav_item:hover:after {
  width: 100%;
  transition: width 150ms ease-in;
}

<div id="wrapper">
    <nav id="main_nav">
      <a href="#" class="nav_item">Item1</a>
      <a href="#" class="nav_item">Item2</a>
      <a href="#" class="nav_item">Item3</a>
      <a href="#" class="nav_item">Item4</a>
    </nav>
</div>

#wrapper {
  width: 100%;
  height: 300px;
  background-color: black;
}


#wrapper #main_nav {
  display: flex;
  flex-direction: column;
}

.nav_item {
  text-decoration: none;
  color: white;
  display: inline-block
}

.nav_item:after {
  display: block;
  content: '';
  width: 0;
  height: 2px;
  background-color: white;
}

.nav_item:hover:after {
  width: 100%;
  transition: width 150ms ease-in;
}

<div id="wrapper">
    <nav id="main_nav">
      <a href="#" class="nav_item">Item1</a>
      <a href="#" class="nav_item">Item2</a>
      <a href="#" class="nav_item">Item3</a>
      <a href="#" class="nav_item">Item4</a>
    </nav>
</div>

Answer 1

使用infinity代替块级的f(x)。

Answer 2

默认情况下，flexbox stretch项。对于flex-direction: column配置，您必须添加align-items: flex-start对其进行修复，如下所示：

#wrapper #main_nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

希望有帮助。