Раскрывающийся список в Navbar с пробелом в настоящее время - BS4

Question

Использование Vue-bootstrap раскрывающегося компонента: b-nav-item-dropdown

У меня проблема при использовании выпадающего элемента в Navbar с горизонтальной прокруткой, когда клиент имеет небольшое разрешение экрана.

Код

    <b-nav class="justify-content-end">
      <b-nav-item class="nav__map" active>First item</b-nav-item>
      <b-nav-item class="nav__help">Second item</b-nav-item>
      <b-nav-item-dropdown class="nav__city" text="New-York" extra-toggle-classes="nav-link-custom" right>
        <b-dropdown-item>New-York</b-dropdown-item>
        <b-dropdown-item>San Francisco</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>

CSS

  .nav {
    white-space: nowrap;
    overflow-x: auto;
    display: inherit;

    .nav-item {
      display: inline-block;
    }
  }

Из-за white-space: nowrap, когда я нажимаю на выпадающее меню, это всплывающее окно идет за всеми элементами:

Я пытался играть с z-index, но безуспешно.