Как запретить dropdown выходить за границу экрана?

Question

[Шамуэй]

На странице есть очень много split button с dropdown (bootstrap 4.1), те кнопки которые находиться у правого края контейнера выходят за границу экрана. Как это можно исправить?

<div class="btn-group">
                    <button type="button" class="btn btn-bd-primary btn-sm">
                        DropDown
                    </button>
                    <button  type="button" class="btn  btn-sm btn-open-dropdown dropdown-toggle dropdown-toggle-split btn" data-reference="parent" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuReference">
                        <a class="dropdown-item" href="example">
                            Link
                        </a>
                         <!-- Куча ссылок -->
                    </div>
                </div>

                   <!-- Остальные dropdowns -->


<style>
.dropdown-menu-right{
     right:0;
    left:auto;
}
</style>

Answer 1

[Максим Тимофеев]

выходят за границу экрана

какую? Нижнюю? Тогда скрол надо делать на блок родитель, при этом кнопки должны иметьposition: relative;, а right:0; у родителя должно быть

Comments

[Шамуэй]

Правую

[Максим Тимофеев]

Хомон, тогда при right:0; это возможно только если ближайший релятивный предок вылазит за край экрана