滚动条生效时如何完整显示下拉菜单内容？

Question

我正在研究website，其中要在滚动条生效时完全显示下拉菜单内容。

此刻，当我们向上/向下滚动时，下拉菜单内容尚未完全显示。

我用来显示滚动条的css代码是：

.dropdowns
{
  overflow-y:auto;
  height: 100px;
}

我用来制作按钮的html代码是：

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </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>

    <a class="dropdown-item" href="#">Separated link</a>

    </div>
</div>

以下是我面临的问题的屏幕截图：

如上所示，下拉菜单似乎没有完整的内容。它缺少动作文本。

问题陈述：

我想知道应该对css代码进行哪些更改，以便在上下滚动时可以看到完整的下拉菜单内容。

如上面的屏幕快照中所述，向上/向下滚动时，剪切内容将被剪切。

编辑1：我想要底部的滚动条（具有按钮列表）。

Answer 1

编辑：对不起，我没有注意到滚动条

尝试添加如下内容：

.btn-group.show {
  position: absolute;
}

http://jsfiddle.net/pkg4zh68/14/