Question

I have a container div with a child div set to position absolute relative to its parent. The container div has its min – height set however when the child div’s height expands over the height of the parent the parent doest stretch. This is due to the absolute positioning of the child. Is there any ideas how i can get the parent to stretch with the child as its height increases

#parent{
 position:relative;
 min-height:200px;
 width:200px;
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child"></div>
</div>

Answer 1

What you are trying to achieve is plain impossible,just for the simple fact that when you add an absolute rule to an element, you are implicitly taking it out of its normal layout context. Being in a relative parent container only means that it has a defined box that will contain it and set the default x and y coordinates of that element, by default it’s the window and that’s why when the position relative is not assigned to the parent absolute positioned elements will be relative to the top-left of the browser window.

Now an alternative could be to use an overflow hidden in the parent and have a scroll bar for the remaining content. See my example on jsfiddle:

#parent{
 position:relative;
 min-height:200px;
 width:200px;
 border: 1px solid #ccc;   
 overflow-y: scroll;   
}

#child{
  position:absolute;
  top:0;
  left:0;
  min-height:150px;
}

<div id="parent">
 <div id="child">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> 
  </div>
</div>