putting a scrollable div inside fixed div

Question

I have to divs and I want the parent to be fixed while the child is scrollable.

parent div css:

aside{
    height: 100%;
    float: left;
    width: 25%;
    position: fixed;
    border-style: solid;
    border-right-color:rgba(0, 0, 0, 0.2);
    border-top: none;
    border-left: none;
    border-bottom: none;
    margin-top:-5px;
    border-width: 1px;
    z-index: 999999999;
    top:0;
}

child one current css:

#big-title-list{
    padding:0;
    margin-left: 5px;
    margin-right: 5px;
    overflow: scroll;
}

In my case a scrollbar appears but it just doesn't scroll at all. None of the solutions in following page worked by the way: Div with scrollbar inside div with position:fixed.

I share the related part of the html below just in case:

<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>

score 0 · Answer 1 · answered Jul 09 '20 at 20:00

Here it is working, also with some other suggestions:

aside{
  display: flex;
  flex-flow: column;
  position: fixed;
  height: 100%;
  width: 25%;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 1; /* 1 should be enough if there are no other z-index */
  top:0;
  left: 0;
}
#big-title-list{
  flex: 1; /* So it fills the available vertical space */
  padding: 0;
  overflow: hidden;
  overflow-y: auto; /* Only vertical scroll appears, only if needed */
  margin: 0;

  /* These two are just to make the content bigger and force the scroll to appear */
  font-size: 18px;
  line-height: 3;
}

<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>

putting a scrollable div inside fixed div

1 Answers1