html - containing div with max-height having a contained div that do not overflow using css -

i have following html.

the height of div b set using max-height. contains 2 divs, b1 , b2 have variable heights.

when height of b1+b2 smaller height of b, want b1 , b2 have normal height (and height ob b smaller it's max-height). part working.

when height of b1+b2 higher 1 of b, don't want b2 overflow div b (i want bottom of b2 match bottom of b, , content inside b2 overflow b2). how can achieve this?

please see fiddle better understanding.

<div id="container"> <div id="a">     <div id="b">         <div id="b1">d1</div>         <div id="b2">             d2 - long content             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line                             <br/>line             <br/>line             <br/>line             <br/>line             <br/>line                            <br/>line             <br/>line             <br/>line             <br/>line             <br/>line         </div>     </div> </div> 

thanks

try change css of b2 :

#b2 {     position:absolute;     background: red;     opacity: 0.5;     max-height:inherit;     overflow:auto;     width:100%; } 

i know it's not perfect because max possible height of b1 + b2 b+b1, maybe acceptable in case ?