Наведите указатель мыши только на текст внутри 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

По умолчанию flexbox stretch элементы.Для конфигурации flex-direction: column вы должны добавить align-items: flex-start, чтобы исправить это, например:

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

Надеюсь, это поможет.

Answer 2

Используйте display: inline-flex; вместо display:flex;, который является уровнем блока.