data-flip
html bootstrap5 Sample
スペースがない場合に、反対側にドロップダウンを表示させる:data-flip
<div class="box" style="overflow: auto">
<br><br><br><br><br>
<div class="dropdown">
<!-- data-flip="true"-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
</div>