Как использовать Overflow-Y видимым с помощью Overflow-X прокрутки в Div?

Question

Как мне кодировать overflow-y: visible с помощью overflow-x: scroll?

Количество кнопок может варьироваться, и если их слишком много, они прокручиваются по горизонтали.Если я нажал кнопку «Раскрывающийся список», то я хочу сделать overflow-y: visible в div.Но теперь раскрывающиеся списки скрыты в div.

Как изменить?

Часть моего кода

html

  <div class="container-fluid fill-height">
      <div class="navbar navbar-expand scroll" role="group">
        <div class="dropdown">
          <button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
          <div class="dropdown-menu" aria-labelledby="testDropdown">
            <a class="dropdown-item" href="#">Menu</a>
          </div>
        </div>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
        <button type="button" class="btn btn-default">BUTTON</button>
      </div>
    </div>

css

.scroll {
  overflow-x: scroll;
  overflow-y: visible;
}

Образец Codepen здесь

Answer 1

И последнее:

Из официального документа начальной загрузки (http://getbootstrap.com/components/#dropdowns-alignment): Может потребоваться дополнительное позиционирование. Раскрывающиеся страницы автоматически позиционируются через CSS в рамках нормального потока документа. Это означает, что раскрывающиеся списки могут быть обрезаныРодители с определенными свойствами переполнения или появляются за пределами области просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.

https://github.com/davidstutz/bootstrap-multiselect/issues/411
https://www.bootply.com/YvePJTDzI0