Dropdown in navbar with white-space nowrap - BS4

问题:

Using Vue-bootstrap dropdown component: b-nav-item-dropdown

I have an issue when using dropdown element in Navbar with horizontal scrolling when client has a small screen resolution.

Code

    <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;
    }
  }

Because of white-space: nowrap when I click on a dropdown, that popup goes behind all elements:

I've tried to play with z-index, but had no success.