how to set height of parent of absolutely positioned element to grow/shrink with child

Question

so i have this:

styled like this:

#parent {         


        

Answer 1

In CSS the control always flows from top down, so the child's height can be controlled by the parent but not the other way round. You could use the following jquery to achieve what you're after though:

var resizeParent = function() {
  var child_height = $('#child').height();
  $('#parent').height(child_height);
};

$(window).resize(function() {
  resizeParent();
});

$document.ready(function() {
  resizeParent();
});