Parent elements cannot use "height:auto" when their children are positioned absolute/ fixed.

Absolutely-positioned items are logically-associated with their parent, but not “physically”. They’re not part of the layout, so the parent item can’t really see how big they are. You need to code the size yourself, or sniff it with JavaScript and set it at run-time.

var biggestHeight = "0";

// Loop through elements children to find & set the biggest height
$(".container *").each(function(){

  // If this elements height is bigger than the biggestHeight
  if ($(this).height() > biggestHeight ) {

    // Set the biggestHeight to this Height
    biggestHeight = $(this).height();
  }
});

// Set the container height
$(".container").height(biggestHeight);

Ps: The above snippet shows a concept and is not a one-size-fits-all solution. You need to adapt it to your use case appropriately. I know I did.

1. CSS: fit relative positioned parent to height of absolute positioned child
2. Auto height on parent container with Absolute/Fixed Children