Can't get overflow-y: scroll to work

Question

I'm trying to create a vertical timeline but I can't seem to get the overflow-y: scroll to work. Here is a link to the website:

http://fosterinnovationculture.com/infographic/index.html

The parent div has an overflow: hidden but the child div has overflow-y. It works properly if I remove the parent div but I need it inside of the div so that list.js plugin works properly.

TOM · Answer 1 · 2016-05-31T15:58:07.310

2

I see your code have

html, body { overflow: hidden; }

// it mean only full screen and all overflow is hidden.

So in .scroll you need set max-height. I suggest a solution

.scroll { max-height: 90vh; }

edited May 31 '16 at 15:58

answered May 31 '16 at 15:43

TOM

178
1
10

Awesome! This fixed it. How is max-heigh different from height? – marcos May 31 '16 at 16:00
max-height is maximum it can do, height only fixed one value and not change if container grow – TOM May 31 '16 at 16:05

score 0 · Answer 2 · answered May 31 '16 at 15:50

You fixed the height of body to 100vh and set it's overflow property's value to hidden; So not matter whatever the height of body's child is, it will not scroll;

If you change body's overflow property to auto, scroll will work;

At the same time you may change the position of top_nav to fixed, in order to keep the search bar at the top all time time.

score 0 · Answer 3 · edited May 23 '17 at 12:31

It seems like you are repeating the same question. Here is you asking about the same problem (though I will admit the question is different because it has changed). Here is my answer to that question.

Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.

With that said, start by removing every instance of overflow: hidden; in your code.

Then get this in there:

.top-nav {
    height: 70px; /* you already specify this on your site */
}
.scroll {
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: scroll;
}

In cases like this, you should try to realize that your question regards a design that is common and someone else must have asked your question before. If you cannot find an answer to such a question, it may be good to rethink your search keywords.

Here is a Stack Overflow question that answers your underlying "how-to" design question.

Can't get overflow-y: scroll to work

3 Answers3