bootstrap dropdown getting cut off the screen only for firefox

Question

In my angular app I am using ngx-bootstrap and at the bottom of the page I have a dropdown like this.

      <div class="btn-group" dropdown container="body">
        <button id="button-container" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
                aria-controls="dropdown-container">
          Dropdown on Body <span class="caret"></span>
        </button>
        <ul id="dropdown-container" *dropdownMenu class="dropdown-menu"
            role="menu" aria-labelledby="button-container">
          <li role="menuitem"><a class="dropdown-item" href="#">1</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">2</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">3</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">4</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">5</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">6</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">7</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">8</a></li>
        </ul>
      </div>

when I open the dropdown from chrome it is working fine and overflow in the y direction is working fine. But if I tired to oepn the drop down from Firefox then dropdown is cutting off from screen and it is not fully visible. Even scroll is not working. In the screenshot you can have a look what I mean.

Here is the dropdown from chrome and it is working fine.

But not showing properly in firefox. Whole dropdown menu is not visible. Any Idea how I can fix that?

Any Idea how I can fix that?