CSS stop element from having greater height than parent

Question

I approximatley this structure

<div> <div id='1'> </div> <div id='2'> </div> </div>

I want to make it so that when div 1's content becomes too large for it and div 2 to fit in the main div, it will get a scrollbar and not push anything off the bottom of the parent div.

How can I do this in CSS?

EDIT:

the parent div (or rather, its parent) has a set height. and at this point setting overflow : scroll on div1 just causes it to go beyond the bottom with a scrollbar on the side.

Answer 1

Use

overflow:scroll

in your CSS on div1.

Answer 2

You can use the overflow setting:

#id
{

   overflow: scroll;

}

Answer 3

First, you need overflow: scroll on div 1. And also you need to somehow fix such a value of its height that the div will need a scrollbar after reaching this value. Should be no problem if you have a fixed height or max-height on your parent div.

EDIT

Check this out: http://www.quirksmode.org/css/overflow.html. It seems (unfortunately) that you nevertheless need a value for your div 1's height. I figured out max-height will do, too. And, by the way, for the scrollbars to appear only when necessary, you need overflow: auto.