Как сделать список кнопок с возможностью прокрутки

Нужно было сделать прокручиваемый список кнопок в левой части экрана. Но полоса прокрутки в дочернем div, даже принудительная с помощью overflow: scroll, не работает. Читал об удалении переполнения из родительских объектов, но безуспешно. Оставлен только родительский объект body для упрощения приведенных ниже фрагментов кода

base.html 

</header>
<body>
        {% block content %}
        {% endblock %}

</body>
<html>

cities.html 

{% extends "base.html" %}

{% block content %}
<div class="scrollbox">
{% for city in cities %}
   <form action="{% url 'city_detail' %}" method="post">
      {% csrf_token %}
      <input type="hidden" name="city_id" value={{ city.id }}>
      <button type="submit">{{ city.name }} </button>
   </form>
{% endfor %}

   <p> Censored...</p>
<!--  added for testing ~100+ - enough for make scrollbar workable by text only - no success  -->
   <p> Censored...</p>
</div>
{% endblock %}

CSS

@import url(//fonts.googleapis.com/css?family=Muli);

body {
    margin:0;
    padding:0;
    /* with overflow hidden main scrollbar not shown, but forced scrollbar in child div not working and the data is cut
    with value auto scroll shown for whole content, remainin not working for child div */
    overflow: auto;
    font-family:helvetica, sans-serif;
}

.scrollbox
{
min-height: 90vh;
border: 2px solid; /* for being sure, that no syntax errors in names, etc - border shown - OK */
float: left;
overflow-y: scroll;
}

Есть идеи? Приведенный выше код легко повторить с любой моделью с достаточным количеством данных, если вам интересно, ИМХО. Я старался сделать его как можно более простым - надеюсь, что это было сделано успешно. Нижняя часть div с родительским переполнением: авто находится ниже.

Bottom of child div with parent overlflow:auto

Выглядит примерно так, верно?

enter image description here

Чтобы сделать дочерний элемент `div` доступным для прокрутки, необходимо задать ему фиксированную или ограниченную высоту. Для достижения этого примените `

overflow: auto 
or
overflow-y: scroll

Вот пример CSS:

.layout-container {
  display: flex;
  height: 100vh; /* => Fill the full screen */
}

.sidebar-scrollable {
  width: 250px; 
  height: 100%;  /* => Fill the parent height */
  overflow-y: auto; /* => Enable vertical scrolling */
  padding: 10px;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.main-content {
  flex: 1;
  padding: 20px;
}

Надеюсь, это поможет

Проблема в том, что ваш .scrollbox не имеет фиксированной высоты.
Чтобы overflow-y: scroll (или auto) работало, браузер должен знать, какой высоты должен быть элемент, прежде чем содержимое начнет переполняться.

Попробуйте задать ему явную высоту (или max-height):
css:

.scrollbox {
    height: 400px;         /* or max-height: 90vh */
    border: 2px solid;
    float: left;
    overflow-y: auto;      /* "auto" usually looks better than "scroll" */
}

Если вы хотите, чтобы он всегда занимал большую часть высоты окна просмотра:

.scrollbox {
    max-height: 90vh;
    overflow-y: auto;
}
Вернуться на верх