Why are there scrollbars?

I was reading an article about the CSS Almanac refresh on css-tricks so I went to check out the page and noticed something odd.

There are scrollbars around the jump menu. They originally were just on the menu itself. I commented on it and the author moved the overflow to the container which is where it stands now.
image

What I’m trying to figure out is why there is overflow. The menu is well under the size of the container, and there are no fixed widths there I can see…removing the overflow:scroll displays the menu just fine until the viewport hits 900px where there’s a overflow, but even that should just be in the X direction.

Inquiring minds want to know…

1 Like

As you said its the overflow:scroll that causes the scrollbar to appear and not sure why they wanted that as it looks very amateurish

I think its because the author forgot to use flex-wrap:wrap and also change the auto to zero or use flex:0 1 auto instead. Otherwise the element is held too wide and overflows.

3 Likes

I have popped an example in here…

Full Page View
https://codepen.io/Snady_Leiby/full/vYoYqOa

Editor View
https://codepen.io/Snady_Leiby/pen/vYoYqOa

As a matter of minor interest I noticed that the
author of the page in question placed “Jump to:”
between the opening ul element and the first
li element. :rolleyes:

2 Likes

The mind boggles :slight_smile:

2 Likes