How to prevent child element from scrolling within scrollable parent?

Question

I have this code:

<ul class="overflow-x:auto; white-space:nowrap; ">
 <li class="nav-item dropdown resdropdown ml-4">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" 
 aria-haspopup="true" aria-expanded="false">السعودية</a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item a" id="link" href="#">اخبار</a>
        <a class="dropdown-item a" id="link" href="#">الرابعة</a>
        <a class="dropdown-item a" id="link" href="#">الآراء</a>
   </div>
 </li> 
</ul>

The list items scroll horizontally when the device width get smaller, but I do not want the dropdown menu to scroll too, so I gave it fixed position like this:

.dropdown-menu {
  position: fixed !important;
  top: 120px !important;
}

Though I made sure the fixed position is applied to the element, it still does not work, and the dropdown keep scrolling with the list items, it's so ugly, how can I solve this problem?

Thanks in advance

Answer 1

position: fixed;

makes that element to separate from other elements.

it never depended by its parent element.

Try using

position: absolute;

(or)

if you need including parent should be in fixed state means, set position: fixed; for parent and create container child element for parent element and paste the dropdown stuff inside that container.