Bootstrap 4 выпадающий внутри родителя с overflow-x auto parent

Question

Я работаю с Boostrap 4 на веб-странице, в которой есть определенный раздел, подобный следующему

.parent {
  overflow-x :auto;
  width: 200px;
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="parent">

  <div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Group Communications &amp; Social Responsiblity Unit<i class="icon-chevron-down"></i></button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>

элемент с классом parent имеет overflow-x:auto;

это выпадающий список, не отображающий пункты меню

Answer 1

Используйте класс position-absolute в раскрывающемся списке и установите для атрибута отображения значение "static" (data-display="static") ...

<div class="parent">
    <div class="dropdown position-absolute">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">Group Communications &amp; Social Responsiblity Unit<i class="icon-chevron-down"></i></button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</div>

https://www.codeply.com/go/X8EHuDNMtc