Как разместить полосу прокрутки для кнопок, сложенных вертикально?

Question

Я работаю над веб-сайтом, на котором я хочу разместить полосу прокрутки для кнопок, свернутых вертикально.

Вот для этого скрипка .

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>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
  </div>
</div>

Постановка задачи:

Мне интересно, как я могу разместить все кнопки внутри полосы прокрутки.Это то, что я пробовал, но, похоже, это не работает.

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

Я следую этому учебнику , чтобы заставить его работать.

Answer 1

вот скрипка для него

<div>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>

<style>
div {
    overflow-y: auto;
    width: 100px;
    height:100px;
 }
 button {
 margin:5px;
    display: inline-block;
    padding: 5px 10px;
    background:green;
    color:white;
    border-radius: 5px;
 }
 </style>

Answer 2

<div>
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
</div>

<style>
div {
    overflow-y: auto;
    width: 100%;
 }
 button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid lightblue;
    border-radius: 5px;
 }
 </style>

Над кодом должно работать.Вы можете добавить любые классы начальной загрузки, которые вы хотите для пользовательского внешнего вида.