Expand div to contain absolutely positioned content

Question

I have a div that contains a bunch of absolutely positioned controls. These controls are dynamically generated and I want the div to expand so it will cover all the content in both width an height. How can I do this in CSS?

Answer 1

This is possible with CSS grid:

.container {
  display: grid;
}

.container > * {
  grid-area: 1/1;
}

.child {
  /* Instead of using top/left, use margins: */
  margin-top: 10px;
  margin-left: 50px;
}

This creates a grid that only has one cell, and every child goes into that cell.

The layout of one child doesn't impact the others, they just overlay on top of one another, but the grid (.container) will expand to fit the bounds of all children.

Demo: https://codepen.io/jaffathecake/pen/zWrvZx

Answer 2

That is difficult to achieve. When you have a relative parent with absolute children inside, they can not affect the size of the parent div.

You have to use relative children also. Why are the controls positioned absolute?

But where CSS fails, JavaScript comes to the rescue. So this can be solved.