How to make child div scrollable when re sizing browser window, using css

Question

<div id="div1">
    <div id="div2">
      // content set the height of div 2
    </div>
</div>

I'm currently stuck on having my child div scrollable, when re sizing browser. div1 will resize in accordance to browser window height. div2 will have a scrollbar (css property overflow y) when the browser re size below the height of div2 . div2 doesn't have a fixed height, its height is based on the content it holds. So if browser window height is below div2 content height then show scroll bar.

Answer 1

You can use max-height like this:

html,body {
    height:100%;
}
#div1 {
    background:red;
    color:white;
    height:100%;
}
#div2 {
    background:black;
    max-height:100%;
    overflow-y:auto;
}

Check This Demo

Answer 2

Thanks denko.. The demo, is the exact behavior I'm looking for.. Despite making changes to my css on reflection of your demo, I cannot manage to get it working. Here's my current css.

<div id="container">
 <div id="div1">
   <div id="div2">
  // content set the height of div 2
   </div>
</div>

//css styles

 #container{
 position:absolute;
 }

#div1    {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
height: 100%;
}

#div2      {

 color: #6e6e6e;
 font-family: arial;
 font-size: 14px;
 overflow-y: auto;
 /* height: 225px; */
 overflow-x: hidden;
 position: relative;
 min-height: 100%;

}