Unwanted scrollbars

HTML & CSS
1

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

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

2

Because it is given a mandatory vertical scrollbar:

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

:wink:

1 Like
3

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

4

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

1 Like
5

I dont think so sir →

image
image990×477 34.2 KB

6

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.

2 Likes
7

Before you changed it to auto:

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

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 →

.smflex>div:last-child

1 Like
9

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.

1 Like
10

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

11

Why not test it? :wink:

1 Like
12

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:

13

I wouldn’t take that for granted.

:blush:

2 Likes
14

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.

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

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.