nav-tabs Не прокручивается через overflow-x: scroll

Question

Я пытался использовать nav-tabs из Bootstrap 4, и когда в нем слишком много элементов, я хотел сделать его прокручиваемым.

Во-первых, поведение по умолчанию - перемещение элементов на следующую строку.Я исправил это с помощью white-space: nowrap и flex-wrap: nowrap.

И понял, что контейнер расширяется вдоль оси x, даже если полоса прокрутки отключена.Я пытался исправить это с помощью max-width: 100%, но он не работает.Я обнаружил, что использование определенного значения px делает его работоспособным, но для меня это не очень хорошее решение.

HTML:

<ul class="nav nav-tabs">
  <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
</ul>

CSS:

.nav {
  white-space: nowrap;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

.nav li {
  display: inline-block
}

Answer 1

Используйте display:block!important; до .nav вместо display:flex

.nav {
  white-space: nowrap;
  display:block!important;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

.nav li {
  display: inline-block
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
    <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
    <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
</ul>