How to make scrollable list of buttons

Needed to make scrollable list of buttons in the left part of the screen. But the scrollbar in child div, even forced by overflow: scroll is not working. Read about removing overflow from parent objects, but without success. Left only body parent object for simplifying the code fragments below

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;
}

Any ideas? The code above is easy to repeat with any model with enough data, if interested, IMHO. Was trying to make it as simple, as possible - I hope, that it was done successfuly. Bottom of div with parent overflow: auto is below.

Bottom of child div with parent overlflow:auto

Looks like this, right?

enter image description here

To make a child `div` scrollable is to give it a fixed or constrained height. To achieve it, apply `

overflow: auto 
or
overflow-y: scroll

Here's an example 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;
}

Hopefully, this will help

Вернуться на верх