CODEWITHSUNDEEP
htmlcssscroll
Jumbalaya Wanton
Jumbalaya Wanton

Reputation: 1621

Why does `overflow: auto;` not cause an element to scroll even when its contents overflow?

Why does setting overflow: auto; on an element not cause it to scroll even when its contents overflow?

I have a two column layout with a fixed left column and a scrolling right column. The right column, is set to overflow: auto;, and it has a child div.content. If I set its minimum height taller than the window, the scroll bar will not appear. If I set the minimum height on its child, div.content the scroll bar appears.

Why is this? Why won't the scroll bar appear when the minimum height is set on main?

Here's a fiddle: http://jsfiddle.net/gT8tq/1/

<div class="page-wrapper">
    <aside>
        <p>Fixed</p>
    </aside>
    <main>
        <section class="content">
            <p>Scroll</p>
        </section>
    </main>
</div>

Styles...

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}
.page-wrapper {
    bottom: 0; left: 0; right: 0; top: 0;
    position: absolute;
    z-index: 100;
}
aside, main {
    bottom: 0; top: 0;
    padding: 20px;
    position: absolute;
}
aside {
    background-color: #eee;
    left: 0;
    width: 30%;
}
main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
    /* Here is the issue; uncommenting this breaks scrolling; Why? */
    /* min-height: 1000px; */
}
.content {
    min-height: 1000px;
}

Upvotes: 1

Views: 4462

Answers (4)

BoltClock
BoltClock

Reputation: 724392

When you set min-height: 1000px on your main element, what ends up happening is that its contents no longer overflow it because it is now 1000 pixels tall. Note that min-height takes precedence even though you anchored the main element to the page bounds using absolute positioning and bottom: 0; top: 0, simply because that results in the main element being less than 1000 pixels tall. What happens then is that the element remains anchored to the top according to its top coordinate and overflows downward, because it's over-constrained thanks to min-height; the details of all this are documented in sections 10.6.4 and 10.7 of the spec.

Since overflow no longer occurs on the main element, it no longer needs to generate a scrollbar for its contents. The main element and its contents still overflow the page as I've described, but since you specified overflow: hidden on html, body, the page will refuse to generate a scrollbar for the main element. The end result, therefore, is that no scrollbar is generated at all.

If you force main to generate a vertical scrollbar even when no overflow occurs, by replacing overflow: auto with overflow-y: scroll, you'll see that the scrollbar actually extends beyond the page bounds such that you no longer see the bottom control(s) — this proves that by adding min-height you have in fact made the main element taller:

main {
    background-color: #ccc;
    left: 30%; right: 0;
    /* overflow: auto; */
    overflow-y: scroll;
    min-height: 1000px;
}

Upvotes: 2

Tom Chung
Tom Chung

Reputation: 1422

In your CSS,

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}

It means that no matter how the height overflow the body element, the scroll bar will not appear.

Besides, overflow: auto in main element is required because actually the scroll bar belongs to the main element instead of the default body element.

main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
}

If you do not want overflow: hidden in body element, you must set position:fixed to aside element.

Check it on http://jsfiddle.net/gT8tq/4/

Upvotes: 3

Sander Koedood
Sander Koedood

Reputation: 6347

That is because you set the behavior for a certain element, in this case <main>. What should <main> do when it's contents are greater than the element itself?

In this case, you say it should create scrollbars in that case. If you put overflow: auto; on the page-wrapper, it will do what you expect, because then you tell that div what to do when it's contents are overflowing.

Does that make sense or do you need more clarification?

Upvotes: 1

Pejman
Pejman

Reputation: 2636

You didn't use position:relative; for .content check this out: http://jsfiddle.net/gT8tq/2/

Upvotes: 0

Related Questions