How to force a div to scroll after a certain size?

Question

The Fiddle

This fiddle explains the problem clearly: fiddle (Edit: fixed broken fiddle.)

The Problem

I have a container div that has 3 divs inside of it.
The top div and middle div are dynamic in height. The bottom div is fixed.
Once the middle div expands enough, I want it to be scrollable.

Code Snippet

The basic structure:

<div id='container'>
    <div id='top'>Top (dynamic) content</div>
    <div id='middle'>Middle (dynamic) content</div>
    <div id='bottom'>Bottom (fixed) content</div>
</div>

The basic CSS:

#container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    padding-bottom: 100px; /* bottom div height */
}

#top {
    ???
}

#middle {
    ???
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
}

The Question

Is there a way to accomplish this using just CSS? (By just CSS, I mean no JavaScript.)

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Here is an approach using flexboxes for the layout:

Example Here

Set the display of the parent #container element to flex. Since you want the element to stack vertically, set the flex-direction property's value to column. And justify-content: space-between is used to position the last element at the bottom when the height of the middle element decreases.

It's worth pointing out that vh units are used to set the height of the parent element to the height of the viewport.

#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

I also set the middles element's flex-shrink property to a relatively arbitrary number in order for it to shrink. Then flex-basis: 100% is used to force the element to fill the remaining space.

#middle {
    overflow-y: auto;
    flex-shrink: 50;
    flex-basis: 100%;
}

score 0 · Answer 2 · answered Jan 25 '15 at 01:12

0

Yes, set a max-height on the #container. You may also need to fiddle with the overflow property. Start by setting it to scroll.

answered Jan 25 '15 at 01:12

Jon Snow · Answer 3 · 2015-01-25T01:34:15.077

0

You could do

#middle {
   overflow-y: auto; /* does nothing */
height: calc(100% - 100px);
}

edited Jan 25 '15 at 01:34

answered Jan 25 '15 at 01:19

Jon Snow

123
2
11

1

I could do that if I knew what its max height could be. Since the div above it is also dynamic, I have no way of knowing. – Steven Jeffries Jan 25 '15 at 01:26

How to force a div to scroll after a certain size?

3 Answers3