Unwanted scrollbars


In the same link that I shared above. i am struggling with extra scroll →

why is extra scrolling coming up on the last item in the vertical scroll.

Nullify border-bottom on last child

Because it is given a mandatory vertical scrollbar:

.smflex div:last-child {
    flex-basis: calc(20% - 20px);
    height: 400px;
    overflow-y: scroll;



Did you get my point there are two vertical scroll bars?


Fixed by overflow-y: auto.
Thanks to them → https://www.w3schools.com/cssref/css3_pr_overflow-y.asp


I dont think so sir →


They are a very small team, so it happens their data and examples are a bit dated.

Mozilla dev. is a more accurate source of knowledge and they too often have demos the visitor can play with.


Before you changed it to auto:

.smflex div:last-child {
    flex-basis: calc(20% - 20px);
    height: 400px;
    overflow-y: scroll;


But it was setting it on snippet-one div, which is not the last child ( ​.smflex div:last-child​)

May be some nested div concept. nested div’s first child is also taking as first div. I think so. back trace understanding method. CSS is easy, but sometimes it becomes complicated.

This may be the solution even in that case →



Indeed. :sunglasses:

1 - the intended scroll was on the parent of snippet-one, that was a last div.
2 - the extra scroll was on the last snippet-one div.


This was the solution even when we set scroll instead of auto?


Why not test it? :wink:


I tested successfully, but wanted to get it stamped by you. Your expert opinion will make it air tight for me in future. :stuck_out_tongue:


I wouldn’t take that for granted.



I think so, but I’m never sure I actually do get the point. :slight_smile:

  1. The longer scrollbar is induced by the tall height given to the last item.
  2. The extra shorter scrollbar is because the mandatory scroll on the last item.

This post was moved at the thread split, it was posted as coming after #3 above, before #4.

Nullify border-bottom on last child